一、前端搭建
1、前端用到js:uploadify(下载地址：http://www.uploadify.com/download/)、layer （下载地址：http://layer.layui.com/），下载之后把它们放在你的项目里 列如
2、根据你的需要在你项目适当的位置建立上传文件的目录 列如（File）
到此前端搭建结束
二、配置文件修改（可选择跳过此步骤）
1、首先说明下，这个步骤可以跳过，此步骤主要是修改上传文件大小的限制（.net 默认最大只能上传4M）如若需要修改请继续阅读该步骤。
2、打开web.config 配置文件 找到<system.web> 节点 ，在该节点下面添加如下节点
<httpRuntime targetFramework="4.5" executionTimeout="500" maxRequestLength="409600" useFullyQualifiedRedirectUrl="false" minFreeThreads="8" minLocalRequestFreeThreads="4" appRequestQueueLimit="100" />
<!-- maxRequestLength属性是上传文件大小的设置 值是kb大小 maxRequestLength=“1024” 为最大上传1M -->
三、代码编写
1、说明下：我用的是mvc模式 所以这里就用mvc的方式编写 （代码是不变的，开发者可以根据你们的设计模式编写）
2、建立一个控制器PageBaseController在该控制器里编写如下代码 （如果是用的aspx页面那么把FileUpdateView方法删掉 ，把UploadifyFile 方法的ActionResult改成void 并去掉return null；）
后端代码如下
1 /// <summary> 2 /// 文件上传页面 3 /// </summary> 4 /// <returns></returns> 5 public ActionResult FileUpdateView() 6 { 7 return View(); 8 } 9 10 /// <summary> 11 /// 文件处理方法 12 /// </summary> 13 /// <param name="filedata"></param> 14 /// <returns></returns> 15 public ActionResult UploadifyFile(HttpPostedFileBase filedata) 16 { 17 if (filedata == null || 18 String.IsNullOrEmpty(filedata.FileName) || 19 filedata.ContentLength == 0) 20 { 21 return HttpNotFound(); 22 } 23 24 string filename = System.IO.Path.GetFileName(filedata.FileName); 25 string virtualPath = String.Format("~/File/{0}", filename); 26 27 string path = Server.MapPath(virtualPath); 28 // 以下注释的代码 都可以获得文件属性 29 // System.Diagnostics.FileVersionInfo info = System.Diagnostics.FileVersionInfo.GetVersionInfo(path); 30 // FileInfo file = new FileInfo(filedata.FileName); 31 32 filedata.SaveAs(path); 33 return null; 34 }
注：virtualPath 是我们搭建上传文件的目录
3、在视图（页面）里引用我们搭建的js：uploadfiy 、layer 路径
列如:
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/lib/layer/layer.js"></script>
<link href="~/Scripts/lib/uploadify/uploadify.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/lib/uploadify/jquery.uploadify.min.js"></script>
注：这里我们用到了jquery
4、前端代码
1 <script type="text/javascript"> 2 var uploadifyOnSelectError; 3 var uploadifyOnUploadError; 4 var uploadifyOnSelect; 5 var uploadifyOnUploadSuccess; 6 uploadifyOnSelectError = function (file, errorCode, errorMsg) { 7 var msgText = "上传失败 "; 8 switch (errorCode) { 9 case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED: 10 //this.queueData.errorMsg = "每次最多上传 " + this.settings.queueSizeLimit + "个文件"; 11 msgText += "每次最多上传 " + this.settings.queueSizeLimit + "个文件"; 12 break; 13 case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT: 14 msgText += "文件大小超过限制( " + this.settings.fileSizeLimit + " )"; 15 break; 16 case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE: 17 msgText += "文件大小为0"; 18 break; 19 case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE: 20 msgText += "文件格式不正确，仅限 " + this.settings.fileTypeExts; 21 break; 22 default: 23 msgText += "错误代码：" + errorCode + " " + errorMsg; 24 } 25 layer.msg(msgText); 26 }; 27 uploadifyOnUploadError = function (file, errorCode, errorMsg, errorString) { 28 // 手工取消不弹出提示 29 if (errorCode == SWFUpload.UPLOAD_ERROR.FILE_CANCELLED 30 || errorCode == SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED) { 31 return; 32 } 33 var msgText = "上传失败 "; 34 switch (errorCode) { 35 case SWFUpload.UPLOAD_ERROR.HTTP_ERROR: 36 msgText += "HTTP 错误 " + errorMsg; 37 break; 38 case SWFUpload.UPLOAD_ERROR.MISSING_UPLOAD_URL: 39 msgText += "上传文件丢失，请重新上传"; 40 break; 41 case SWFUpload.UPLOAD_ERROR.IO_ERROR: 42 msgText += "IO错误"; 43 break; 44 case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR: 45 msgText += "安全性错误 " + errorMsg; 46 break; 47 case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED: 48 msgText += "每次最多上传 " + this.settings.uploadLimit + "个"; 49 break; 50 case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED: 51 msgText += errorMsg; 52 break; 53 case SWFUpload.UPLOAD_ERROR.SPECIFIED_FILE_ID_NOT_FOUND: 54 msgText += "找不到指定文件，请重新操作"; 55 break; 56 case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED: 57 msgText += "参数错误"; 58 break; 59 default: 60 msgText += "文件:" + file.name + " 错误码:" + errorCode + " " 61 + errorMsg + " " + errorString; 62 } 63 layer.msg(msgText); 64 }; 65 66 uploadifyOnSelect = function () { 67 }; 68 uploadifyOnUploadSuccess = function (file, data, response) { 69 layer.msg(file.name + " " + response + " " + data); 70 }; 71 $(function () { 72 73 $("#uploadify").uploadify({ 74 uploader: '/PageBase/UploadifyFun', //处理上传的方法 75 swf: '/Scripts/lib/uploadify/uploadify.swf', 76 80, // 按钮宽度 77 height: 60, //按钮高度 78 buttonText: "上传文件", 79 buttonCursor: 'hand', 80 fileSizeLimit:20480, 81 fileobjName: 'Filedata', 82 fileTypeExts: '*.xlsx;*.docx', //扩展名 83 fileTypeDesc: "请选择xslx,docx文件", //文件说明 84 auto: false, //是否自动上传 85 multi: true, //是否一次可以选中多个文件 86 queueSizeLimit: 5, //允许同时上传文件的个数 87 overrideEvents: ['onSelectError', 'onDialogClose'], // 是否要默认提示 要就不配置 88 onSelect: uploadifyOnSelect, 89 onSelectError: uploadifyOnSelectError, 90 onUploadError: uploadifyOnUploadError, 91 onUploadSuccess: uploadifyOnUploadSuccess 92 }); 93 }); 94 </script> 95 <span id="uploadify"></span> 96 <div> 97 <a href="javascript:$('#uploadify').uploadify('upload','*');">上传</a> 98 <a href="javascript:$('#uploadify').uploadify('cancel', '*');">取消</a> 99 </div>
注：fileSizeLimit 属性的值最好和我们web.config 里设置的文件上传最大值一样（不能大于这个值）
到这里。我们文件上传就结束了。
喜欢我的文章就关注我吧，有疑问可以留言。