Jquery-uploadify多文件上传插件使用介绍

Jquery-uploadify多文件上传插件使用起来非常的给力，在此记录一下使用方法。

query-uploadify插件的属性设置

<script src="JS/jquery.min.js" type="text/javascript"></script><script src="JS/jquery.uploadify/jquery.uploadify.min.js" type="text/javascript"></script><script type="text/javascript">
        $(function () {
            $("#uploadify").uploadify({
                'swf': '/JS/jquery.uploadify/uploadify.swf',//flash地址
                'uploader': 'UploadHandler.ashx',//后台处理程序
                'buttonImage': '/img/bgimg.jpg',//按钮图片
                'auto': true,//选中后是否自动上传
                'multi': true,//是否可以多文件上传
                'queueID': 'fileQueue',//成功后列表追加对象
                'width': 157,
                'height': 45,
                'fileSizeLimit': '50MB',//文件大小限制
                'fileTypeExts': '*.docx;*.doc;*.ppt;*.pptx;*.pdf;*.caj;*.txt;*.rar;*.zip;*.jpg;*.gif;',//格式限制
                'fileTypeDesc:': '请选择docx doc ppt pptx pdf caj txt rar zip jpg gif文件',//格式提示
                'progressData': 'all',//进度显示样式
                'removeCompleted': false,//是否移除队列
                'overrideEvents': ['onSelectError', 'onDialogClose'],//重写事件
                //返回一个错误，选择文件的时候触发
                'onSelectError': function (file, errorCode, errorMsg) {
                    switch (errorCode) {
                        case -100:
                            alert("上传的文件数量已经超出系统限制的" + $('#uploadify').uploadify('settings', 'queueSizeLimit') + "个文件！");
                            break;
                        case -110:
                            alert("文件 [" + file.name + "] 大小超出系统限制的" + $('#uploadify').uploadify('settings', 'fileSizeLimit') + "大小！");
                            break;
                        case -120:
                            alert("文件 [" + file.name + "] 大小异常！");
                            break;
                        case -130:
                            alert("文件 [" + file.name + "] 类型不正确！");
                            break;
                    }
                    return true;
                },
                //检测FLASH失败调用
                'onFallback': function () {
                    alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");
                }
 
            });
        });
    
</script>
<!--Jquery-uploadify调用-->
<body>
    <p>
        <a href="javascript:$('#uploadify').uploadifyUpload()">上传</a>| 
        <a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上传</a>
    </p>
    <input type="file" name="uploadify" id="uploadify" />
    <div id="fileQueue" style=""></div>
</body>

处理文件UploadHandler.ashx.cs代码

较为基本的处理程序，接收uploadify文件数据进行处理保存。

/// <summary>
    /// $codebehindclassname$ 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
 
    public class UploadHandler : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";   
            context.Response.Charset = "utf-8";   
 
            HttpPostedFile file = context.Request.Files["Filedata"];   
            string  uploadPath = 
                HttpContext.Current.Server.MapPath(@context.Request["folder"])+"\\";  
 
            if (file != null)  
            {  
               if (!Directory.Exists(uploadPath))  
               {  
                   Directory.CreateDirectory(uploadPath);  
               }   
               file.SaveAs(uploadPath + file.FileName);  
                //下面这句代码缺少的话，上传成功后上传队列的显示不会自动消失
               context.Response.Write("1");  
            }   
            else  
            {   
                context.Response.Write("0");   
            }  
        }
 
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

uploaddify相关链接

posted @ 2015-11-23 17:31  Mr. Hu  阅读(499)  评论(0)  编辑  收藏  举报
Map