一、前端搭建
1、前端用到js:uploadify(下載地址：http://www.uploadify.com/download/)、layer （下載地址：http://layer.layui.com/），下載之后把它們放在你的項目里 列如
2、根據(jù)你的需要在你項目適當?shù)奈恢媒⑸蟼魑募哪夸?nbsp; 列如（File）
到此前端搭建結束
二、配置文件修改（可選擇跳過此步驟）
1、首先說明下，這個步驟可以跳過，此步驟主要是修改上傳文件大小的限制（.net 默認最大只能上傳4M）如若需要修改請繼續(xù)閱讀該步驟。
2、打開web.config 配置文件 找到<system.web> 節(jié)點 ，在該節(jié)點下面添加如下節(jié)點
<httpRuntime targetFramework="4.5" executionTimeout="500" maxRequestLength="409600" useFullyQualifiedRedirectUrl="false" minFreeThreads="8" minLocalRequestFreeThreads="4" appRequestQueueLimit="100" /><!-- maxRequestLength屬性是上傳文件大小的設置 值是kb大小 maxRequestLength=“1024” 為最大上傳1M -->
三、代碼編寫
1、說明下：我用的是mvc模式 所以這里就用mvc的方式編寫 （代碼是不變的，開發(fā)者可以根據(jù)你們的設計模式編寫）
2、建立一個控制器PageBaseController在該控制器里編寫如下代碼?。ㄈ绻怯玫腶spx頁面那么把FileUpdateView方法刪掉 ，把UploadifyFile 方法的ActionResult改成void 并去掉return null；）
后端代碼如下
/// <summary> /// 文件上傳頁面 /// </summary> /// <returns></returns> public ActionResult FileUpdateView() { return View(); } /// <summary> /// 文件處理方法 /// </summary> /// <param name="filedata"></param> /// <returns></returns> public ActionResult UploadifyFile(HttpPostedFileBase filedata) { if (filedata == null || String.IsNullOrEmpty(filedata.FileName) || filedata.ContentLength == 0) { return HttpNotFound(); } string filename = System.IO.Path.GetFileName(filedata.FileName); string virtualPath = String.Format("~/File/{0}", filename); string path = Server.MapPath(virtualPath); // 以下注釋的代碼 都可以獲得文件屬性 // System.Diagnostics.FileVersionInfo info = System.Diagnostics.FileVersionInfo.GetVersionInfo(path); // FileInfo file = new FileInfo(filedata.FileName); filedata.SaveAs(path); return null; } 注：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="external nofollow" rel="stylesheet" /><script src="~/Scripts/jquery-1.10.2.min.js"></script><script src="~/Scripts/lib/uploadify/jquery.uploadify.min.js"></script>
注：這里我們用到了jquery
4、前端代碼
<script type="text/javascript"> var uploadifyOnSelectError; var uploadifyOnUploadError; var uploadifyOnSelect; var uploadifyOnUploadSuccess; uploadifyOnSelectError = function (file, errorCode, errorMsg) { var msgText = "上傳失敗/n"; switch (errorCode) { case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED: //this.queueData.errorMsg = "每次最多上傳 " + this.settings.queueSizeLimit + "個文件"; msgText += "每次最多上傳 " + this.settings.queueSizeLimit + "個文件"; break; case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT: msgText += "文件大小超過限制( " + this.settings.fileSizeLimit + " )"; break; case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE: msgText += "文件大小為0"; break; case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE: msgText += "文件格式不正確，僅限 " + this.settings.fileTypeExts; break; default: msgText += "錯誤代碼：" + errorCode + "/n" + errorMsg; } layer.msg(msgText); }; uploadifyOnUploadError = function (file, errorCode, errorMsg, errorString) { // 手工取消不彈出提示 if (errorCode == SWFUpload.UPLOAD_ERROR.FILE_CANCELLED || errorCode == SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED) { return; } var msgText = "上傳失敗/n"; switch (errorCode) { case SWFUpload.UPLOAD_ERROR.HTTP_ERROR: msgText += "HTTP 錯誤/n" + errorMsg; break; case SWFUpload.UPLOAD_ERROR.MISSING_UPLOAD_URL: msgText += "上傳文件丟失，請重新上傳"; break; case SWFUpload.UPLOAD_ERROR.IO_ERROR: msgText += "IO錯誤"; break; case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR: msgText += "安全性錯誤/n" + errorMsg; break; case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED: msgText += "每次最多上傳 " + this.settings.uploadLimit + "個"; break; case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED: msgText += errorMsg; break; case SWFUpload.UPLOAD_ERROR.SPECIFIED_FILE_ID_NOT_FOUND: msgText += "找不到指定文件，請重新操作"; break; case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED: msgText += "參數(shù)錯誤"; break; default: msgText += "文件:" + file.name + "/n錯誤碼:" + errorCode + "/n" + errorMsg + "/n" + errorString; } layer.msg(msgText); }; uploadifyOnSelect = function () { }; uploadifyOnUploadSuccess = function (file, data, response) { layer.msg(file.name + "/n/n" + response + "/n/n" + data); }; $(function () { $("#uploadify").uploadify({ uploader: '/PageBase/UploadifyFun', //處理上傳的方法 swf: '/Scripts/lib/uploadify/uploadify.swf', width: 80, // 按鈕寬度 height: 60, //按鈕高度 buttonText: "上傳文件", buttonCursor: 'hand', fileSizeLimit:20480, fileobjName: 'Filedata', fileTypeExts: '*.xlsx;*.docx', //擴展名 fileTypeDesc: "請選擇xslx,docx文件", //文件說明 auto: false, //是否自動上傳 multi: true, //是否一次可以選中多個文件 queueSizeLimit: 5, //允許同時上傳文件的個數(shù) overrideEvents: ['onSelectError', 'onDialogClose'], // 是否要默認提示 要就不配置 onSelect: uploadifyOnSelect, onSelectError: uploadifyOnSelectError, onUploadError: uploadifyOnUploadError, onUploadSuccess: uploadifyOnUploadSuccess }); });</script><span id="uploadify"></span><div> <a href="javascript:$('#uploadify').uploadify('upload','*');">上傳</a> <a href="javascript:$('#uploadify').uploadify('cancel', '*');">取消</a></div> 注：fileSizeLimit 屬性的值最好和我們web.config 里設置的文件上傳最大值一樣（不能大于這個值）
到這里。我們文件上傳就結束了。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
