一、前端用到js:uploadify(下载地址:http://www.uploadify.com/download/)、layer (下载地址:http://layer.layui.com/),下载以后把它们放在你的项目里 列如javascript
二、根据你的须要在你项目适当的位置创建上传文件的目录 列如(File)css
到此前端搭建结束前端
一、首先说明下,这个步骤能够跳过,此步骤主要是修改上传文件大小的限制(.net 默认最大只能上传4M)如若须要修改请继续阅读该步骤。java
二、打开web.config 配置文件 找到<system.web> 节点 ,在该节点下面添加以下节点jquery
<httpRuntime targetFramework="4.5" executionTimeout="500" maxRequestLength="409600" useFullyQualifiedRedirectUrl="false" minFreeThreads="8" minLocalRequestFreeThreads="4" appRequestQueueLimit="100" />web
<!-- maxRequestLength属性是上传文件大小的设置 值是kb大小 maxRequestLength=“1024” 为最大上传1M -->后端
一、说明下:我用的是mvc模式 因此这里就用mvc的方式编写 (代码是不变的,开发者能够根据大家的设计模式编写)设计模式
二、创建一个控制器PageBaseController在该控制器里编写以下代码 (若是是用的aspx页面那么把FileUpdateView方法删掉 ,把UploadifyFile 方法的ActionResult改为void 并去掉return null;) 安全
后端代码以下 mvc
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 是咱们搭建上传文件的目录
三、在视图(页面)里引用咱们搭建的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
四、前端代码
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 = "上传失败\n"; 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 + "\n" + 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 = "上传失败\n"; 34 switch (errorCode) { 35 case SWFUpload.UPLOAD_ERROR.HTTP_ERROR: 36 msgText += "HTTP 错误\n" + 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 += "安全性错误\n" + 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 + "\n错误码:" + errorCode + "\n" 61 + errorMsg + "\n" + errorString; 62 } 63 layer.msg(msgText); 64 }; 65 66 uploadifyOnSelect = function () { 67 }; 68 uploadifyOnUploadSuccess = function (file, data, response) { 69 layer.msg(file.name + "\n\n" + response + "\n\n" + data); 70 }; 71 $(function () { 72 73 $("#uploadify").uploadify({ 74 uploader: '/PageBase/UploadifyFun', //处理上传的方法 75 swf: '/Scripts/lib/uploadify/uploadify.swf', 76 width: 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 里设置的文件上传最大值同样(不能大于这个值)
到这里。咱们文件上传就结束了。
喜欢个人文章就关注我吧,有疑问能够留言。