欢迎来到六久阁织梦模板网!
织梦前台上传参考jQuery Uploadify 3.2上传插件使用

织梦前台上传参考jQuery Uploadify 3.2上传插件使用

浏览次数: 0

作者: 六久阁织梦模板网

信息来源: 六久阁

更新日期: 2018-05-08

文章简介

Uploadify下载地址:http://www.uploadify.com/download/ 这里下载最新版的3.2的。 下载下来解压后估计里面很多文件,其实有用的也就一个jquery.uploadify.js和uploadify.swf这两个文件。当然啦,jQuery库那是必须的。 在你使用的项目中,把jquery.uploadify

  • 正文开始
  • 热门文章

Uploadify下载地址:http://www.uploadify.com/download/ 这里下载最新版的3.2的。

下载下来解压后估计里面很多文件,其实有用的也就一个jquery.uploadify.js和uploadify.swf这两个文件。当然啦,jQuery库那是必须的。

在你使用的项目中,把jquery.uploadify.js引入以后,用法和大多数JQ插件一样。同时也要记得引入swfobject.js这个插件,版本2.2以上的。使用方法例如:

$(function() {
    $("#file_upload_1").uploadify({
        height        : 30,
        swf           : '/uploadify/uploadify.swf',
        uploader      : '/uploadify/UploadHandler.ashx',
        width         : 120
    });
});

file_upload_1其实也就是一个容器ID,比如

,上面的只是简单的事例,下面我就把我在项目中做的发出来,每个都有解释:

$(document).ready(function() {
    $("#file_upload").uploadify({
        //开启调试
        'debug' : false,
        //是否自动上传
        'auto':false,
        //超时时间
        'successTimeout':99999,
        //附带值
        'formData':{
            'userid':'用户id',
            'username':'用户名',
            'rnd':'加密密文'
        },
        //flash
        'swf': "uploadify.swf",
        //不执行默认的onSelect事件
        'overrideEvents' : ['onDialogClose'],
        //文件选择后的容器ID
        'queueID':'uploadfileQueue',
        //服务器端脚本使用的文件对象的名称 $_FILES个['upload']
        'fileObjName':'upload',
        //上传处理程序
        'uploader':'imageUpload.php',
        //浏览按钮的背景图片路径
        'buttonImage':'upbutton.gif',
        //浏览按钮的宽度
        'width':'100',
        //浏览按钮的高度
        'height':'32',
        //expressInstall.swf文件的路径。
        'expressInstall':'expressInstall.swf',
        //在浏览窗口底部的文件类型下拉菜单中显示的文本
        'fileTypeDesc':'支持的格式:',
        //允许上传的文件后缀
        'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png',
        //上传文件的大小限制
        'fileSizeLimit':'3MB',
        //上传数量
        'queueSizeLimit' : 25,
        //每次更新上载的文件的进展
        'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
             //有时候上传进度什么想自己个性化控制,可以利用这个方法
             //使用方法见官方说明
        },
        //选择上传文件后调用
        'onSelect' : function(file) {
                   
        },
        //返回一个错误,选择文件的时候触发
        'onSelectError':function(file, errorCode, errorMsg){
            switch(errorCode) {
                case -100:
                    alert("上传的文件数量已经超出系统限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"个文件!");
                    break;
                case -110:
                    alert("文件 ["+file.name+"] 大小超出系统限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小!");
                    break;
                case -120:
                    alert("文件 ["+file.name+"] 大小异常!");
                    break;
                case -130:
                    alert("文件 ["+file.name+"] 类型不正确!");
                    break;
            }
        },
        //检测FLASH失败调用
        'onFallback':function(){
            alert("您未安装FLASH控件,无法上传图片!请安装FLASH控件后再试。");
        },
        //上传到服务器,服务器返回相应信息到data里
        'onUploadSuccess':function(file, data, response){
            alert(data);
        }
    });
});

大体上常用的我想也就这些,至于后端处理上传部分,我这里就不多讲了,和普通的文件上传处理方式是一样的。

上传后台处理程序UploadHandler.ashx:

 

/// <summary>
    /// UploadHandler 的摘要说明
    /// </summary>
    public class UploadHandler : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            try
            {
                context.Response.ContentType = "text/plain";
                //接收上传后的文件
                HttpPostedFile file = context.Request.Files["Filedata"];
                //其他参数
                //string somekey = context.Request["someKey"];
                //string other = context.Request["someOtherKey"];
                //获取文件的保存路径
                //string uploadPath = HttpContext.Current.Server.MapPath("UploadImages" + "\\");
                string uploadPath = context.Request.Form["uploadPath"];
                //没有指定上传路径,则使用默认路径
                if (string.IsNullOrEmpty(uploadPath) || uploadPath == "")
                {
                    uploadPath = string.Format("/upload/images/{0}/{1}/", DateTime.Now.Year, DateTime.Now.Month.ToString("D2"));
                }
                string fullUploadPath = HttpContext.Current.Server.MapPath(uploadPath);
                //判断上传的文件是否为空
                if (file != null)
                {
                    if (!Directory.Exists(fullUploadPath))
                    {
                        Directory.CreateDirectory(fullUploadPath);
                    }
                    //文件名
                    string _filename = context.Request.Form["uploadFileName"];
                    //没有指定文件名,则生成一个随机文件名
                    if (string.IsNullOrEmpty(_filename) || _filename == "")
                    {
                        DateTime _temDT = DateTime.Now;
                        //扩展名
                        string sExt = file.FileName.Substring(file.FileName.LastIndexOf(".")).ToLower();
                        //生成随机数
                        int digit = 6;
                        Random _rnd = new Random();
                        string rnd = _rnd.Next((int)Math.Pow(10, digit), (int)Math.Pow(10, digit + 1)).ToString();
                        //文件名
                        _filename = string.Format("{0}{1}{2}", _temDT.Ticks.ToString(), rnd, sExt);
                    }
                    //保存文件
                    file.SaveAs(fullUploadPath + _filename);
                    context.Response.Write(string.Format("{{\"code\":\"1\",\"msg\":\"上传成功\",\"filePath\":\"{0}\",\"fileName\":\"{1}\"}}", uploadPath + _filename, _filename));
                }
                else
                {
                    context.Response.Write("{{\"code\":\"0\",\"msg\":\"没有要上传的文件!\"}}");
                }
            }
            catch (Exception ex)
            {
                context.Response.Write(string.Format("{{\"code\":\"0\",\"msg\":\"{0}\"}}", ex.Message));
            }
            finally
            {
                context.Response.End();
            }
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
织梦二次开发QQ群

本站客服QQ号:862782808(点击左边QQ号交流),群号(383578617) DedeCMS织梦教程QQ群 如果您有任何织梦问题,请把问题发到群里,阁主将为您写解决教程!

转载请注明: 织梦模板 » 织梦前台上传参考jQuery Uploadify 3.2上传插件使用

  • 织梦dedecms手机站m目录下不生成index.html实现动态更新
    阅读
    用 织梦建站 会手机站首页不更新的苦恼,每次 PC 更新,要去删除 m 目录下的 index.html ,手机站首页才会更新,这样很麻烦,通过以下修改,让手机站首页是动态的,不生成 index.html , PC 端更新后,手机端首页自动更新。 把 \m\index.php 里面的 $row[sho...
  • 织梦Fatal error: Call to undefined function make_hash() in /dede/sys_info.php on line 201的解决方法
    阅读
    织梦系统安装好后,进入后台,出现Fatal error: Call to undefined function make_hash() in /dede/sys_info.php on line 201 一般出现这个问题是因为升级网站引起的。我们可以直接把错误提示这段代码删除或者屏蔽就行了。 打开/dede/sys_info.php,找到201...
  • 织梦Dedecms 5.7 火车头采集免登陆发布接口适配PHP7.X插件
    阅读
    最近有粉丝说,之前用的火车头发布文章时,用免登陆接口在PHP7.0环境中显示空白,于是今天抽空更新了一下插件(话说,DedeCms早期版本无法在PHP7.X运行,用最新版的!),那么接下来的代码就是插件发布模块无须变更,只需要变更接口插件就可以了 ?php/*/////...
  • 织梦dedecms系统多城市分站功能开发思路
    阅读
    当前很多人用织梦dedecms系统建站,多城市分站对地方性长尾关键词和全国市场的推广有着很大的帮助,今天和大家分享下如何实现织梦dedecms系统多城市分站功能。 方法/步骤 织梦dede城市分站有三种方法: 第一种是建立N多个模板,有多少个城市建立多少个模板,...
  • 织梦dedecms提交自定义表单后发送到指定邮箱
    阅读
    网上很多教程都是用 dedecms 自带的邮件库发送邮件,而且是写死要发送的字段内容,今天我们用 phpmailer 来给站长发送自定义表单提交的数据到指定邮箱上 (QQ 邮箱, 163 邮箱都可以 ) ,不写死任何东西,有什么字段就提交发送什么字段。 操作之前,我们要先...
  • dedecms织梦ckplayer视频播放器插件详细安装教程
    阅读
    织梦 ckplayer 视频播放器插件安装步骤: 第一步、下载安装插件。下载地址:点击此处 将下载下来的压缩包中的相应编码的模块文件解压出来再上传到织梦程序的 data/module/ 文件夹内或者直接在后台模块管理菜单里面选择上传新模块安装即可。如下图: 1.1 )上...
  • 织梦5.7火车头免登陆文章发布模块采集后自动更新织梦整站
    阅读
    织梦5.7火车头免登陆文章发布模块采集后自动更新织梦整站详细步骤: 1、下载文档后,把DedeCMS免登陆接口文章发布模块DedeCMS 5.7 免登陆接口文章发布模块.wpm复制到火车头采集规则文件夹Module下; 2、选择您网站对应的接口文件.如您网站是gbk编码,请选择 g...
  • 织梦采集侠破解版自动采集触发教程24小时触发自动审核自动更新
    阅读
    最新采集侠V2.9.2破解版,可以在网站进行全自动数据采集,采集侠破解版可以帮助用户快速提升自己网站的Seo排名。 织梦采集侠是一款基于dedecms的一套根据关键词自动采集,无须编写复杂的采集规则,自动伪原创,自动发布内容的绿色插件。简单配置好后能实现24...
  • 织梦dedecms网站添加打赏功能
    阅读
    有时我们看到别人家的织梦dedecms网站有打赏功能,是不是羡慕嫉妒恨呢?今天我来给大家讲讲织梦网站怎么添加支付宝、微信打赏功能。 二、首先登陆畅言后台(没有畅言账号的首先注册账号) 三、进入后台,找到实验室--打赏 四、设置配置信息,保存。 五、复制...
  • 织梦火车头采集免登陆接口采集文章后自动更新栏目、首页、文章页,实现自动化采集
    阅读
    最近用织梦dedecms程序采集文章时候,发现每次采集都要去后台更新一下文章、栏目、上下篇以及首页,操作起来真心麻烦,后面在网上收集了一些代码以及经过自己调试,发现居然可以自动更新文章页以及栏目、首页。真心爽,这样子就能稳稳的挂机采集了哈。这是免...
收藏此文 打赏本站

如本文对您有帮助,就请六久阁织梦模板网抽根烟吧!

  • 支付宝打赏
    支付宝扫描打赏
    微信打赏
    微信扫描打赏
织梦禁止调用隐藏栏目下文章的方法
« 上一篇 2018年05月09日
百度编辑器ueditor代码高亮效果实现方法
下一篇 » 2018年05月08日

精彩评论

有问题在这里提问,阁主会为你解决!
  • 全部评论(0
    还没有评论,快来抢沙发吧!
推荐精品模板更多