Uploadify使用
这几天一个项目中需要使用到上传文件，写入到数据库的操作，之前一同事自己做了一个上传功能，但对于大文件上传效率极低，并且度条显示不正确，后来让我重新做一个，起初是想自己使用AJAX做一个上传，然后在后台处理，把文件以流的方式读到内存，再从内存中写入到数据库，多文件时就会对服务器性能造成很大的影响，考虑到开发周期和项目进度就改用其它的方法，最终发现uploadify上使用方法，并且容易实现，所以改用uploadify，下面这几天使用uploadify的一些小的细节。
1 <head id="Head1" runat="server"> 2 <title>Uploadify</title> 3 <link href="JS/uploadify-v2.1.4/uploadify.css" rel="stylesheet" type="text/css" /> 4 <script src="JS/uploadify-v2.1.4/jquery-1.4.2.min.js" type="text/javascript"></script> 5 <script type="text/javascript" src="JS/jquery.uploadify-v2.1.0/swfobject.js"></script> 6 <script src="JS/uploadify-v2.1.4/jquery.uploadify.v2.1.4.min.js" type="text/javascript"></script> 7 <script type="text/javascript"> 8 var vFileLimit = 5; 9 $(document).ready(function () { 10 $("#uploadify").uploadify({ 11 'uploader': 'JS/uploadify-v2.1.4/uploadify.swf', //指定的swf文件 12 'script': 'UploadHandler.ashx', //指定后台处理文件的ashx 13 'cancelImg': 'JS/uploadify-v2.1.4/cancel.png', //右上角取消按钮 14 'folder': 'UploadFile',//上传到指定的目录路径 15 'fileDesc': 'Wrod文档(*.doc,*.docx)|Excel文件(*.xls,*.xlsx)|图片文件(*.jpg;*.png;*.gif;*.bmp;*.jpeg;*.tiff;*.dwg)|压缩文件(*.zip;*.rar;*.7z)', //提示选择哪些文件，‘|’可以把提示改为下拉列表多个选项 16 'fileExt': '*.doc;*.docx|*.xls,*.xlsx|*.jpg;*.png;*.gif;*.bmp;*.jpeg;*.tiff;*.dwg|*.zip;*.rar;*.7z', //与fileDesc合用，一一对应，选择不同的选项可以过滤出来不同类型文件 17 'queueID': 'fileQueue', //选择后文件所放位置 18 'auto': false, //是否自动上传 19 'multi': true, //是否支持多文件上传 20 'removeCompleted': false, //上传完成后是否自动移除，默认为true 21 'sizeLimit': '41943041', //上传文件大小限制单位字节 22 'queueSizeLimit': vFileLimit, //最多文件个数限制 23 onInit: function () { //启动时即调用 24 $('#aLimit').html(vFileLimit); 25 }, 26 onError: function (event, queueId, fileObj, errorObj) { //出现错误时回调此方法 27 if (errorObj.type === 'File Size') { 28 alert("《" + fileObj.name.split('.')[0] + "》超出大小限制,请让传小于40M的文件"); 29 } 30 }, 31 onQueueFull: function (event, queueLimit) {//队列中超出了queueSizeLimit时调用此方法 32 alert(queueLimit); 33 return false; //省略此句会弹出默认的错误提示 34 } 35 , onFallback: function () {//未安装false时提示 36 alert("您未安装FLASH控件，无法上传！请安装FLASH控件后再试。"); 37 }, 38 onComplete: function (event, ID, fileObj, response, data) {//单个文件上传完成后提示 39 $('#' + ID).find('.data').html('上传完成'); 40 alert("完成"); 41 }, onAllCompleted:function(){//全部上传完成后提示 42 alert('已全部上传完成！'); 43 } 44 }); 45 }); 46 </script> 47 </head> 48 <body> 49 <div id="fileQueue"><!--选择文件后存放位置--> 50 </div> 51 <input type="file" name="uploadify" id="uploadify" /> 52 <p> 53 <b id="aLimit"></b><a id="aid" href="javascript:$('#uploadify').uploadifyUpload()">上传</a>| <a href="javascript:$('#uploadify').uploadifyClearQueue()"> 54 取消上传</a> 55 </p> 56 </body>
后台处理:
1 context.Response.ContentType = "text/plain"; 2 context.Response.Charset = "utf-8"; 3 4 HttpPostedFile file = context.Request.Files["Filedata"]; 5 string uploadPath = 6 HttpContext.Current.Server.MapPath(@context.Request["folder"]) + "\\"; 7 int _iflen = file.ContentLength; 8 byte[] buffer = new byte[_iflen]; 9 file.InputStream.Read(buffer, 0, _iflen - 1); 10 11 if (file != null) 12 { 13 if (!Directory.Exists(uploadPath)) 14 { 15 Directory.CreateDirectory(uploadPath); 16 } 17 file.SaveAs(uploadPath + file.FileName); 18 //下面这句代码缺少的话，上传成功后上传队列的显示不会自动消失 19 context.Response.Write("1"); 20 } 21 else 22 { 23 context.Response.Write("0"); 24 }
其它一些参数使用，请参见官网使用方法或其他园友的参数详解，这里不再赘述
fileDesc和fileExt可再添加一个显示全部文件'*.*'
