uploadify多文件上传的例子
最近用uploadify做了一个多文件上传的功能，所有文件上传完成后，显示文件列表，图片显示缩略图，其他类型显示文件类型图标，word2003文件可使用dsoframer.ocx实现在线编辑。还可以在列表中编辑文件备注并更新。同时还可以验证指定类型的文件是否超过大小/个数限制；还有只能上传一个word文档，后上传的word文档选择后提示是否替换之前的，根据用户选择决定是否上传和是否替换之前的数据。
这里只给出基本的demo，因为其他功能我都是硬编码的，且和项目的相关性比较高，不是通用的。但是我会说明一下设计思路。
前台部分代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>uploadifyDemo</title> <link rel="stylesheet" type="text/css" href="uploadify/uploadify.css" /> </head> <body> <form id="form1" runat="server"> <%--此处ID必须以file_upload开头 FileUpload.js中是按file_upload开头来查找的--%> <input id="file_upload_test" name="file_upload_test" type="file" /> <%--此处ID必须以queue开头且queue_之后的命名和上面的input的ID的file_upload后的值一致 FileUpload.js中是按queue开头来查找的--%> <div id="queue_test" class="queue" style="display: none;"></div> </form> <script type="text/javascript" src="uploadify/jquery.min.js"></script> <script type="text/javascript" src="uploadify/jquery.tmpl.min.js"></script> <script type="text/javascript" src="uploadify/jquery.uploadify.js"></script> <script type="text/javascript" src="uploadify/FileUpload.js"></script> <script type="text/javascript"> var agrs_test=[]; agrs_test['donePage']="FileUploadTestDone.ashx"; //agrs_test['buttonImage']="images/addfile.gif"; agrs_test['btnHeight']="22"; agrs_test['btnWidth']="90"; agrs_test['buttonText']="选择文件"; agrs_test['fileType']="*.gif; *.jpg; *.png"; agrs_test['multi']=true; agrs_test['auto']=true; var fileUpload=new FileUpload('queue_test','file_upload_test',agrs_test); </script> </body> </html>
FileUpload.js内容：
//文件上传对象构造 FileUpload=function(listId,fileTxtId,agrs) { var jqueryIdSel='#'+fileTxtId; $(function() { $(jqueryIdSel).uploadify( { 'queueID':listId,//queueID 'swf' :agrs['swf']===undefined ? 'uploadify/uploadify.swf' :agrs['swf'],//flash文件路劲 'uploader' :(agrs['donePage']===undefined ? 'FileUploadTestDone.ashx' :agrs['donePage']) + '?var=' + new Date().toString(),//接收文件的页面 'buttonImage' :agrs['buttonImage']===undefined ? null:agrs['buttonImage'],//选择文件按钮的图片 'buttonText' :agrs['buttonText']===undefined ? 'SELECT FILES' :agrs['buttonText'],//选择文件按钮的文字 'height' :agrs['btnHeight']===undefined ? '15' :agrs['btnHeight'],//选择文件按钮的高度 'width' :agrs['btnWidth']===undefined ? '60' : agrs['btnWidth'],//选择文件按钮的宽度 'auto' :false, 'fileTypeExts' :agrs['fileType']===undefined ? '*.gif; *.jpg; *.png;*.doc' :agrs['fileType'],//文件类型 'multi' :agrs['multi']===undefined ? true :agrs['multi'],//是否多选 'uploadLimit' :agrs['uploadLimit']===undefined ? 999 :parseInt(agrs['uploadLimit'],10),//上传文件数限制 'onQueueComplete' :function(queueData) { $("#"+listId).hide(); }, 'onDialogClose' :function(queueData) { if(queueData.filesSelected>0) { if(agrs['auto'])//自定义的自动上传 { startUpload(); } } } }); }); }; //上传 function startUpload() { //所有的控件都上传 $("div[id^='file_upload'].uploadify").each(function() { var id = $(this).attr("id"); var queueObj=$("#"+id.replace("file_upload","queue")); uploadifyUpload(this,queueObj); }); } function uploadifyUpload(uploadifyElmObj,queueObj) { if(uploadifyElmObj!=null) { if(queueObj.find("div.uploadify-queue-item a[href*='uploadify']").size()>0) { queueObj.css("filter","Alpha(Opacity=90)"); queueObj.css("position","absolute"); queueObj.css("top",$(uploadifyElmObj).attr("top")); queueObj.css("left",10); queueObj.css("width","700px"); queueObj.show(); $(uploadifyElmObj).uploadify('upload','*'); } } } //取消 function cancelUpload() { $("div[id^='file_upload'].uploadify").uploadify('cancel');//所有的控件都取消上传 }
接收文件的后台代码：
<%@ WebHandler Language="C#" Class="Handler" %> using System; using System.IO; using System.Web; using System.Web.Configuration; using System.Data.SqlClient; using System.Web.SessionState; public class Handler : IHttpHandler, IReadOnlySessionState, IRequiresSessionState { public void ProcessRequest(HttpContext context) { string uploadPath = HttpContext.Current.Server.MapPath("UploadedFiles") + "\\"; string oldName = ""; string resultStr = ""; try { HttpPostedFile file = context.Request.Files["Filedata"]; if (file != null) { if (!Directory.Exists(uploadPath)) { Directory.CreateDirectory(uploadPath); } oldName = file.FileName; string fileType = Path.GetExtension(file.FileName).ToLower(); string newName = Guid.NewGuid().ToString() + fileType; uploadPath += newName; switch (fileType) { case ".doc": fileType = "WORD文档(.doc)"; break; case ".txt": fileType = "文本文档(.txt)"; break; case ".pdf": fileType = "PDF文档(.pdf)"; break; case ".gif": case ".jpg": case ".bmp": case ".png": fileType = "图片文档(.gif/.jpg/.bmp/.png)"; break; } double uploadFileSize = file.ContentLength / 1024; double limitedFileSize = 0; if (fileType == "WORD文档(.doc)") { limitedFileSize = double.Parse(WebConfigurationManager.AppSettings["docFile_MaxRequestLength"]); if (uploadFileSize > limitedFileSize) { context.Session["uploadifyErrorMess"] += oldName + "超过Word文件大小限制（" + Math.Round(limitedFileSize / 1024, 2) + @"MB）\n"; resultStr = "0"; } } else if (fileType == "图片文档(.gif/.jpg/.bmp/.png)") { limitedFileSize = double.Parse(WebConfigurationManager.AppSettings["imgFile_MaxRequestLength"]); if (uploadFileSize > limitedFileSize) { context.Session["uploadifyErrorMess"] += oldName + "超过图片文件大小限制（" + Math.Round(limitedFileSize / 1024, 2) + @"MB）\n"; resultStr = "0"; } } //using (SqlConnection conn = new SqlConnection(DefaultDBConnection)) //{ //conn.Open(); //省去数据库操作的代码... if (resultStr != "0") { file.SaveAs(uploadPath); //存文件 } ////生成缩略图 //if (fileType.IndexOf(".gif/.jpg/.bmp/.png") > -1) //{ // MakeThumbnail(uploadPath, uploadPath.Replace("\\UploadedFiles\\", "\\UploadedFiles\\Thumbnails\\"), 72, 72); //} //} resultStr = "1"; } else { resultStr = "0"; } } catch (Exception ex) { //logger.Error("保存附件异常！"); //logger.Error("异常描述：\t" + ex.Message); //logger.Error("异常方法：\t" + ex.TargetSite); //logger.Error("异常堆栈：\t" + ex.StackTrace); if (ex.Message == "超过了最大请求长度。") { context.Session["uploadifyErrorMess"] += oldName + "超过服务器端上传文件大小限制（" + Math.Round(double.Parse(WebConfigurationManager.AppSettings["maxRequestLength"]) / 1024, 2) + @"MB）\n"; ; } resultStr = "0"; } context.Response.ContentType = "text/plain"; context.Response.Write(resultStr); } public bool IsReusable { get { return false; } } }
显示上传文件列表的思路就是在所有文件上传完成后，单独发一个AJAX请求查询关联的文件信息即可（前提是保存了这些数据到数据库，且知道查询该数据的ID）。另外显示列表的时候可以带出Session["uploadifyErrorMess"]中的信息。至于文件个数的限制就是利用这个列表的HTML来查找已经上传的文件的信息了。
判断是否所有文件已经上传完成的方法是修改jquery.uploadify.js中case SWFUpload.FILE_STATUS.COMPLETE:下的方法：
setTimeout(function() { if ($('#' + file.id)) { swfuploadify.queueData.queueSize -= file.size; swfuploadify.queueData.queueLength -= 1; delete swfuploadify.queueData.files[file.id] var closeTag=$('#' + file.id).find("a[href*='uploadify']"); closeTag.remove(); $('#' + file.id).hide()//隐藏已上传文件提示div /*$('#' + file.id).fadeOut(500, function() { $(this).remove(); });*/ } }, 0); //}, settings.removeTimeout * 1000);
那么判断是否全部上传完成，只需在onUploadComplete事件中添加如下代码：
if($("div[id^='queue'].queue").find("a[href*='uploadify']").size()==0) { //完成 }
另外顺带说明一下，改dsoframer标题栏的一个小方法：
<style type="text/css"> .Cover{ position: absolute; top: 106px; left:5px; background-color: #FFFFFF; z-index: 10000; width:810px text-align:center; vertical-align:middle; color:#FFFFFF; font-size:9pt; } </style> <div id="WordEdit"> <object id="MyOffice" name = "MyOffice" style="width:100%;height:630px" classid="clsid:00460182-9E5E-11D5-B7C8-B8269041DD57" codebase="dsoframer.ocx#2,2,0,8"></object> </div> <div class="Cover" id="Cover_DIV" style="padding-top:3px;padding-left:4px;"> Word编辑 <iframe style="position: absolute; z-index: -1; width: 100%; height:21px; top: 0; left: 0;" src="footer.html" frameborder="0" scrolling="no" border="0" marginwidth="0" marginheight="0"/> </div> <script> $("#Cover_DIV").width($("body").width()-6); </script>
打包下载：uploadifyDemo.rar
参考资料：http://www.uploadify.com/documentation/