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

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) 如果您有任何织梦问题，请把问题发到群里，阁主将为您写解决教程！

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