前言
上傳文件應該是很常見必不可少的一個操作，網上也有很多提供的上傳控件。今天遇到一個問題：input控件file無法進行異步無刷新上傳。真真的感到別扭。所以就嘗試這去處理了一下。主要分三個部分：上傳類的封裝，html input控件file處理和后台controller的調用。
上傳封裝類：
此類主要兩個功能，一些簡單的篩選和文件重命名操作。
文件的篩選包括：
文件類型，文件大小
重命名：
其中默認為不進行重命名操作，其中重命名默認為時間字符串DateTime.Now.ToString("yyyyMMddHHmmss")
文件地址：
可進行自定義。相對地址與絕對地址都可以。
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.IO; using System.Web; namespace CommonHelper { public class UploadFile : System.Web.UI.Page { public UploadFile() { } //錯誤信息 public string msg { get; set; } public string FullName { get; set; } //文件名稱 public string FileName { get; set; } /// <summary> /// 文件上傳 /// by wyl 20161019 /// </summary> /// <param name="filepath">文件上傳地址</param> /// <param name="size">文件規定大小</param> /// <param name="filetype">文件類型</param> /// <param name="files">file上傳的文件</param> /// <param name="isrename">是否重名名</param> /// <returns></returns> public bool upload_file(string filepath, int size, string[] filetype, bool isrename = false) { filepath = Server.MapPath(filepath); //文件夾不存在就創建 if (!Directory.Exists(filepath)) Directory.CreateDirectory(filepath); if (HttpContext.Current.Request.Files.Count == 0) { msg = "文件上傳失敗"; return false; } msg = "上傳成功"; var file = HttpContext.Current.Request.Files[0]; if (file.ContentLength == 0) { msg = "文件大小為0"; return false; } if (file.ContentLength > size * 1024) { msg = "文件超出指定大小"; return false; } var filex = HttpContext.Current.Request.Files[0]; string fileExt = Path.GetExtension(filex.FileName).ToLower(); if (filetype.Count(a => a == fileExt) < 1) { msg = "文件類型不支持"; return false; } if (isrename) FileName = DateTime.Now.ToString("yyyyMMddHHmmss") + fileExt; FileName = filex.FileName; FullName = Path.Combine(filepath, FileName); file.SaveAs(FullName); return true; } } }
上傳文件的方法在這也沒有什么過得的介紹。看代碼注釋應該都好理解。
頁面html
<div class="content"> <form method="post" target="hidden_frame" enctype="multipart/form-data" action="/CustomFrom/FormDesign/FileUpload" name="form"> <input class="m input" name="fileName" type="file"> <input class="btn file-input" value="提交..." name="F2" type="submit"> <iframe id="hidden_frame" name="F2" style="display: none"> <html> <head></head> <body></body> </html> </iframe> </form> </div>
注：因為mvc上傳文件input控件file不支持異步無刷新上傳，故此用調用跳轉到iframe的方式進行上傳無刷新操作。
以上頁面就是上傳控件的html定義。有幾點要注意的
1.enctype="multipart/form-data"必須加上，表單中enctype="multipart/form-data"的意思，是設置表單的MIME編碼。默認情況，這個編碼格式是application/x-www-form-urlencoded，不能用於文件上傳；只有使用了multipart/form-data，才能完整的傳遞文件數據，進行下面的操作. enctype="multipart/form-data"是上傳二進制數據; form里面的input的值以2進制的方式傳過去。
2.form的name 要加上
3.提交按鈕是submit，當然你如果想寫js 設置成button也成。這個沒什么好說的。
4.iframe 中style="display: none"
以上就是整個的布局和提交上傳文件到后台，並且跳轉到ifrom中，接下來就是接受調用上面上傳文件的方法。然后在iframe頁面提示上傳結果，然后把iframe關閉即可。
后台代碼：
[HttpPost]
public ActionResult FileUpload() { //從配置文件中獲取支持上傳文件格式 string[] fileType = ConfigurationManager.AppSettings["fileType"].Split('|'); //上傳文件路徑 string strPath = ConfigurationManager.AppSettings["strPath"]; UploadFile file= new UploadFile(); bool flag = file.upload_file(strPath, 25000, fileType); return Content("<script>window.alert('" + file.msg + "');window.top.close()</script>"); }
注：
1.文件路徑，文件保存路徑放在了配置文件中，當然你也可以把文件大小，是否重命名都放到配置文件中。
2.返回到view的腳本先彈出提示框；在關閉窗口
3.根據你自己的需要去調用UploadFile的msg（錯誤提示），FullName （全名稱）， FileName文件名稱進行操作
4.window.top.close()關閉當前iframe的窗口，針對於兼容性請大家自行處理，我測試的沒有問題。