文件上傳的幾個示例分享【推薦】

更新時間：2016年12月16日 16:20:52 作者：神牛步行3

本篇文章主要分享的是幾個上傳文件的例子和邏輯步奏及自定義個簡單的js上傳插件。具有很好的參考價值，需要的朋友一起來看下吧

本篇將要和朋友們分享的是幾個上傳文件的例子和邏輯步奏及自定義個簡單的js上傳插件我取名為shenniu.upfile-0.0.1.js；近來在討論組中很有幾個朋友咨詢上傳文件的代碼和怎么下載上傳的文件，所以寫了此篇文章，希望能為朋友們解答一些疑惑或能帶來幫助，也謝謝各位多多支持點贊。

以上是個人的看法，下面來正式分享今天的文章吧：

使用iis發(fā)布保存上傳文件的文件夾
示例A - 普通表單上傳文件，Request.Files獲取上傳文件
示例B - 普通表單上傳文件，HttpPostedFileBase獲取上傳文件
示例C - ajax+FormData上傳文件，Request.Files獲取上傳文件
示例D - 自定義上傳插件，Request.Files獲取上傳文件并提交表單內(nèi)容

下面一步一個腳印的來分享：

. 使用iis發(fā)布保存上傳文件的文件夾

首先，因為我們上傳文件后，需要查看或者下載這個文件，通常分為兩種形式；一種把上傳的文件上傳到程序的根目錄中的某個文件夾中，這種就可以直接通過站點的虛擬路徑來訪問，這種其實也是使用了iis發(fā)布的；第二種是通過程序上傳到服務(wù)器的某個磁盤中，這種路徑通常就不在上傳程序站點的目錄下，因為想讓用戶通過其他的url地址訪問下載文件，iis發(fā)布只是其中一種；其實用iss發(fā)布保存上傳文件的文件夾和發(fā)布程序一樣差不多；

我們隨便找個某磁盤下面的文件夾當(dāng)做保存上傳文件的文件夾，我這里磁盤路徑是：D:\D\TTest這個TTest文件夾，然后放幾張測試的圖片，并復(fù)制這個路徑，在iis中創(chuàng)建一個站點物理路徑指向剛才的復(fù)制的路徑，端口我這里是1010，我這里沒有域名只有用本機(jī)的ip代替，這里默認(rèn)是localhost，配置好后，查看高級設(shè)置如：

然后點擊"測試文件地址"這個站點-》內(nèi)容視圖能看到如圖的效果

然后，鼠標(biāo)指上去右鍵其中某一張圖片-》瀏覽這樣瀏覽器馬上就能看到如圖所示的效果：

這樣就完成了iis發(fā)布文件夾，當(dāng)然通過http訪問圖片只是多種方式的一種；有些后綴的文件可能訪問不了，需要手動在iis中增加mime類型：

. 示例A - 普通表單上傳文件，Request.Files獲取上傳文件

首先，我們來看下html主要代碼：

<fieldset>
 <legend>示例A - 普通表單上傳文件，Request.Files獲取上傳文件</legend>
 <form action="/Error/A" method="post" enctype="multipart/form-data">
 <input type="file" name="fileA" multiple />
 <button type="submit">提交</button>
 </form>
</fieldset>

看是簡單簡單及簡短的代碼，其實是上傳的重要部分必不可少的，下面就來簡單總結(jié)下：

form元素的action屬性：表單提交地址，這里是文件上傳的接口地址
必須采用method="post"提交方式
表單提交數(shù)據(jù)的格式是enctype="multipart/form-data"
type="file"元素必須要有屬性name，這里例子是name="fileA"
type="file"元素的multiple屬性可選，意思是可以選擇多個上傳文件不用再增加file標(biāo)簽元素來支持上傳多個文件了，這個在近幾年移動端火熱的時候幾乎所有最新版本瀏覽器都支持

再來，我們一起看下后端怎么接受表單提交過來的文件信息，先來看代碼：

[HttpPost]
 public ActionResult A()
 {
 var sbLog = new StringBuilder(string.Empty);
 var fileCount = Request.Files.Count;
 //訪問上傳文件地址
 var path = @"http://localhost:1010/{0}";
 //保存文件地址
 var uploadPath = @"D:\D\TTest";
 sbLog.AppendFormat("上傳文件目錄:{0}<br/>", uploadPath);
 sbLog.AppendFormat("上傳文件量:{0}<br/>", fileCount);
 for (int i = 0; i < fileCount; i++)
 {
 var file = Request.Files[i];
 if (file == null || string.IsNullOrEmpty(file.FileName)) { continue; }
 var fileName = file.FileName;
 var fileNewName = DateTime.Now.Ticks + fileName;
 sbLog.AppendFormat("第:{0}個文件名稱：{1}新名稱：{2}下載地址：<a href='{3}' target='_blank'>{2}</a><br/>", i + 1, fileName, fileNewName, string.Format(path, fileNewName));
 file.SaveAs(Path.Combine(uploadPath, fileNewName));
 }
 return Content(sbLog.ToString());
 }

這段代碼的總要點列舉如下：

Request.Files：用來獲取上傳的文件，所有上傳文件都以此來獲取，什么文件名稱也包含在列表中
path變量：就是咋們在前面配置的iis發(fā)布文件夾的url路徑，只需要傳遞上傳的文件的名稱就可以訪問
uploadPath：保存文件地址
通過for循環(huán)獲取上傳上來的文件信息和通過file.SaveAs保存到uploadPath指定的文件夾中去
Path.Combine方法把傳遞進(jìn)來的參數(shù)拼接長一個磁盤路徑如第一個參數(shù)值是D:/第二個參數(shù)是test.png那么這個方法返回的結(jié)果是D:/test.png

最終我這個Action返回的是ContentResult，因為我想在頁面輸入一些信息好截圖哈哈，好了咋們通過復(fù)制上面的代碼運(yùn)行起來點"提交"按鈕得到的效果如圖：

文件夾中選擇上的兩張圖片，就是我們頁面上傳上來的，通過點擊Action返回給頁面的下載地址，我們可以在瀏覽器中瀏覽圖片；好這個上傳圖片，瀏覽圖片的過程描述大概就是這樣，朋友們有收獲一些么

. 示例B - 普通表單上傳文件，HttpPostedFileBase獲取上傳文件

經(jīng)過示例A描述的上傳，下載圖片流程應(yīng)該都很清楚了，這個小節(jié)主要是換了一種獲取上傳文件信息的方式，我們通過HttpPostedFileBase獲?。ㄆ鋵嵤纠鼳Request.Files的最底層就是這個），因為可能上傳多個文件所以使用了IEnumerable<HttpPostedFileBase>類型來當(dāng)做Action的參數(shù)，試圖部分我們使用HtmlHelper的BeginForm方法來生成form標(biāo)簽，具體代碼如：

<fieldset>
 <legend>示例B - 普通表單上傳文件，HttpPostedFileBase獲取上傳文件</legend>
 @using (Html.BeginForm("B", "Error", FormMethod.Post, new { enctype = "multipart/form-data" }))
 {
 <input type="file" name="files" multiple />
 <button>提交</button>
 }
</fieldset>

這里使用@html.BeginForm寫法主要是滿足使用mvc的同學(xué)，簡單說下這里使用的BeginForm參數(shù)：BeginForm(Action，Controller，表單提交方式，增加form屬性enctype)；好再來看下Controller的代碼如：

[HttpPost]
 public ActionResult B(IEnumerable<HttpPostedFileBase> files)
 {
 var sbLog = new StringBuilder(string.Empty);
 var fileCount = files == null ? 0 : files.Count();
 //訪問上傳文件地址
 var path = @"http://localhost:1010/{0}";
 //保存文件地址
 var uploadPath = @"D:\D\TTest";
 sbLog.AppendFormat("上傳文件目錄:{0}<br/>", uploadPath);
 sbLog.AppendFormat("上傳文件量:{0}<br/>", fileCount);
 var i = 0;
 foreach (var file in files)
 {
 if (file == null || string.IsNullOrEmpty(file.FileName)) { continue; }
 var fileName = file.FileName;
 var fileNewName = DateTime.Now.Ticks + fileName;
 sbLog.AppendFormat("第:{0}個文件名稱：{1}新名稱：{2}下載地址：<a href='{3}' target='_blank'>{2}</a><br/>", i + 1, fileName, fileNewName, string.Format(path, fileNewName));
 file.SaveAs(Path.Combine(uploadPath, fileNewName));
 }
 return Content(sbLog.ToString());
 }

上面的代碼與示例A對比一下，可以看出處理方式幾乎是一模一樣呢，那這里就沒什么說的了，主要是展示下兩種獲取file文件信息的方式，但下面的將與眾不同

. 示例C - ajax+FormData上傳文件，Request.Files獲取上傳文件

首先，來了解下FormData這個近幾年才被幾乎所有瀏覽器支持的js對象，它的構(gòu)造函數(shù)：new FormData (form? : HTMLFormElement)，后面的?號和C#參數(shù)差不多表示參數(shù)非必須，F(xiàn)ormData的最大優(yōu)點就是可以異步上傳一個二進(jìn)制文件，好吧這個神奇了；繼續(xù)來將示例C，通常我們提交一般的文字信息直接通過jquery的ajax，post，get等幾個方法就能傳遞到后臺，這些直接傳參方式無法吧file信息傳遞給后臺，但用到FormData我們就可以用ajax把file文件信息傳遞給后臺，這樣我們也可以有更好的無刷新效果的上傳文件了，先來看下前端html代碼和js代碼：

<fieldset>
 <legend>示例C - ajax+FormData上傳文件，Request.Files獲取上傳文件</legend>
 @using (Html.BeginForm("C", "Error", FormMethod.Post, new { enctype = "multipart/form-data", @id = "form_c" }))
 {
 <span>賬號：</span><input type="text" name="userName" value="神牛步行3" /><br />
 <span>密碼：</span><input type="password" name="userPwd" value="神牛" /><br />
 <span>文件：</span><input type="file" name="filesc" multiple /><br />
 <button type="button">提交</button><br />
 <span id="msg_c"></span>
 }
</fieldset>

<script>
 $(function () {
 //示例C代碼
 $("#form_c button[type='button']").click(function () {
 var msg = $("#msg_c");
 var btnSave = $(this);
 var formData = new FormData(document.getElementById("form_c"));
 console.log(formData);
 $.ajax({
 url: '/Error/C',
 type: 'post',
 beforeSend: function (e) {
  btnSave.attr("disabled", "disabled");
  msg.html("上傳中...");
 },
 success: function (data) {
  console.log(data);
  var alertMsg = "上傳失敗";
  if (data) {
  alertMsg = data.Status == 1 ? data.Data : alertMsg;
  }
  msg.html(alertMsg);
  btnSave.removeAttr("disabled");
 },
 error: function (data) {
  msg.html("上傳失敗");
  btnSave.removeAttr("disabled");
 },
 data: formData,
 cache: false,
 contentType: false,
 processData: false
 });
 });
 })
</script>

上面的html代碼與示例B的格式差不多，只是增加了兩個input元素方便我們來測試；重點在js代碼中，由上面介紹可以看到FormData的構(gòu)造只能是HTMLFormElement，所以我們通過document.getElementById("form_c")來獲取這個表單的對象傳遞給它；

然后，我們用普通的$.ajax提交FormData對象到后臺進(jìn)行上傳，至于后臺我們參照示例A的方式來獲取文件信息，不用做什么特殊額處理，只是我們返回的信息是Json數(shù)據(jù)，代碼如：

[HttpPost]
 public JsonResult C()
 {
 Thread.Sleep(1000 * 5);
 var response = new MoResponse();
 var sbLog = new StringBuilder("開始處理...");
 try
 {
 sbLog.AppendFormat("賬號：{0}<br/>", Request.Params["userName"]);
 sbLog.AppendFormat("密碼：{0}<br/>", Request.Params["userPwd"]);
 var fileCount = Request.Files.Count;
 //訪問上傳文件地址
 var path = @"http://localhost:1010/{0}";
 //保存文件地址
 var uploadPath = @"D:\D\TTest";
 sbLog.AppendFormat("上傳文件目錄:{0}<br/>", uploadPath);
 sbLog.AppendFormat("上傳文件量:{0}<br/>", fileCount);
 for (int i = 0; i < fileCount; i++)
 {
  var file = Request.Files[i];
  if (file == null || string.IsNullOrEmpty(file.FileName)) { continue; }
  var fileName = file.FileName;
  var fileNewName = DateTime.Now.Ticks + fileName;
  sbLog.AppendFormat("第:{0}個文件名稱：{1}新名稱：{2}下載地址：<a href='{3}' target='_blank'>{2}</a><br/>", i + 1, fileName, fileNewName, string.Format(path, fileNewName));
  file.SaveAs(Path.Combine(uploadPath, fileNewName));
  response.Status = 1;
 }
 }
 catch (Exception ex)
 {
 sbLog.AppendFormat("異常信息：{0}", ex.Message);
 }
 finally
 {
 response.Data = sbLog.ToString();
 }
 return Json(response);
 }

下面我們看一下添加"提交"按鈕執(zhí)行后返回的效果，可以看出提交后沒有跳轉(zhuǎn)到action指向的路由，這樣用戶體驗就好多了：

. 示例D - 自定義上傳插件，Request.Files獲取上傳文件并提交表單內(nèi)容

首先，我發(fā)個插件下載地址shenniu.upfile-0.0.1.js，只需要在試圖或者h(yuǎn)tml頁面引用jquery-1.10.2.min.js庫和這個插件，我們就可以這樣使用：

<script>
 $(function () {
 //示例D代碼
 //初始化插件
 var shenniu = new shenniu_UpFile({
 url: "/Error/D_A",
 fileEleName: "filesd"
 });
 //提交事件
 $("#form_d button[type='button']").click(function () {
 var msg = $("#msg_d");
 var btnSave = $(this);
 btnSave.attr("disabled", "disabled");
 msg.html("上傳中..");
 //上傳文件
 shenniu.submitFun(function (data) {
 try {
  var result = JSON.parse(data);
  //上傳成功，保存數(shù)據(jù)
  if (result.Status == 1) {
  //增加上傳成功的文件名稱到表單
  var hidFileNames = $("#form_d input[name='hidFileNames']");
  if (hidFileNames.length <= 0) { $("#form_d").append("<input type='hidden' name='hidFileNames' value='" + result.Data + "'/>"); 
  else {
  hidFileNames.val(result.Data);
  }
  //獲取表單鍵值對，提交表單數(shù)據(jù)
  var param = $("#form_d").serialize();
  var action = $("#form_d").attr("action");
  $.post(action, param, function (res) {

  msg.html(res.Status == 1 ? "保存成功<br/>" + res.Data : "保存失敗");
  });
  } else {
  msg.html(result.Data);
  }
 } catch (e) {
  console.log(e.message);
 } finally {
  btnSave.removeAttr("disabled");
 }
 });
 });
 })
</script>

使用插件的地方和js關(guān)鍵點已經(jīng)通過代碼注釋備注好了，朋友們可仔細(xì)閱讀下，這里要將的是插件上傳文件和提交表單數(shù)據(jù)的邏輯；我們分析下：

form表單中通常有其他的屬性數(shù)據(jù)
form表單的提交數(shù)據(jù)的后臺地址可能和上傳文件的后臺地址不一樣
需要單獨上傳文件后，返回是否上傳成功，再提交form表單的其他數(shù)據(jù)到后臺

由上面幾點插件的參數(shù)定義為：

var defOption = { url: "http://www.cnblogs.com/wangrudong003/", //上傳路由地址，注：1.目前通過該地址上傳文件成功后，返回的信息是text/plain 2.跨域暫未考慮
 fileEleName: "fileName",  //上傳input file控件的唯一名稱
 uid: new Date().getTime(),  //防重復(fù)
 backFun: function () { }  //回調(diào)函數(shù)
 };

這個自定義插件原理和幾個重點是：

自動創(chuàng)建一個iframe（用來做無刷新體驗），iframe里面創(chuàng)建一個form表單，form表單里面只包含要上傳的文件file對象，最終把iframe加入到視圖頁面中
通過iframe.load()方法來獲取上傳文件后返回到contentWindow.document.body中的信息，并且執(zhí)行自定義回調(diào)函數(shù)，把參數(shù)傳遞給自定義方法方便使用者自由的控制體驗效果
創(chuàng)建的form表單里面只能使用頁面選擇文件上傳的文件file對象，使用jquery的clone()函數(shù)無法獲取到選擇的文件對象(這是一個悲劇)，所以我這個使用append把用戶使用的那個file對象直接包含到創(chuàng)建的form中去，然后在創(chuàng)建一個初始化的file元素對象到原始的視圖中去代替被移除掉的file元素，代碼如(這個還真花了我2個小時的時間嘗試)：

//清空自定義form多余的file元素
 form.html("");
 var files = $("input[name='" + defOption.fileEleName + "']");
 //復(fù)制上傳控件對象
 var filesClone = files.clone(true);
 filesClone.insertAfter(files);
 form.append(files);

使用該插件提交原始表單數(shù)據(jù)的順序是：用戶點擊頁面的保存按鈕-》通過插件創(chuàng)建的上傳文件的form表單，提交上傳文件-》上傳文件返回成功與否的信息-》收到上傳成功新文件名稱信息，創(chuàng)建個hidden保存新文件名稱到原始form中去-》再真實提交原始form表單的其他數(shù)據(jù)

下面來看下效果圖：

示例D的后臺代碼分為兩部分：1.上傳文件的Action 2.真實獲取表單form參數(shù)的Action，代碼如：

/// <summary>
 /// 保存form提交的表單數(shù)據(jù)
 /// </summary>
 /// <returns></returns>
 [HttpPost]
 public JsonResult D()
 {
 var response = new MoResponse();
 var sbLog = new StringBuilder(string.Empty);
 try
 {
 //訪問上傳文件地址
 var path = @"http://localhost:1010/{0}";
 sbLog.AppendFormat("賬號：{0}<br/>", Request.Params["userName"]);
 sbLog.AppendFormat("密碼：{0}<br/>", Request.Params["userPwd"]);
 foreach (var item in Request.Params["hidFileNames"].Split(new char[] { '|' }, StringSplitOptions.RemoveEmptyEntries))
 {
  sbLog.AppendFormat("文件新名稱：{0};下載地址：<a href='{1}' target='_blank'>{0}</a><br/>", item, string.Format(path, item));
 }
 response.Status = 1;
 }
 catch (Exception ex)
 {
 sbLog.AppendFormat("異常信息：{0}", ex.Message);
 }
 finally
 {
 response.Data = sbLog.ToString();
 }
 return Json(response);
 }
 /// <summary>
 /// 獲取上傳文件信息
 /// </summary>
 /// <returns></returns>
 [HttpPost]
 public ContentResult D_A()
 {
 var response = new MoResponse();
 response.Data = "上傳失敗";
 try
 {
 Thread.Sleep(1000 * 3);
 var fileCount = Request.Files.Count;
 //保存文件地址
 var uploadPath = @"D:\D\TTest";
 var fileNames = string.Empty;
 for (int i = 0; i < fileCount; i++)
 {
  var file = Request.Files[i];
  if (file == null || string.IsNullOrEmpty(file.FileName)) { continue; }
  var fileName = file.FileName;
  var fileNewName = DateTime.Now.Ticks + fileName;
  file.SaveAs(Path.Combine(uploadPath, fileNewName));
  fileNames += fileNewName + "|";
 }
 if (!string.IsNullOrEmpty(fileNames))
 {
  response.Status = 1;
  response.Data = fileNames.TrimEnd('|');
 }
 }
 catch (Exception ex)
 {
 response.Data = ex.Message;
 }
 return Content(JsonConvert.SerializeObject(response));
 }

好了插件需要講解的就這么多，不知不覺有只剩我一個人了，該回家了，下面給出整體的代碼，插件代碼請使用連接獲?。?/p>

插件下載地址：shenniu.upfile-0.0.1.js

Controller代碼：

public class ErrorController : Controller
 {
 //
 // GET: /Error/
 public ActionResult Index()
 {
 return View();
 }
 [HttpPost]
 public ActionResult A()
 {
 var sbLog = new StringBuilder(string.Empty);
 var fileCount = Request.Files.Count;
 //訪問上傳文件地址
 var path = @"http://localhost:1010/{0}";
 //保存文件地址
 var uploadPath = @"D:\D\TTest";
 sbLog.AppendFormat("上傳文件目錄:{0}<br/>", uploadPath);
 sbLog.AppendFormat("上傳文件量:{0}<br/>", fileCount);
 for (int i = 0; i < fileCount; i++)
 {
 var file = Request.Files[i];
 if (file == null || string.IsNullOrEmpty(file.FileName)) { continue; }
 var fileName = file.FileName;
 var fileNewName = DateTime.Now.Ticks + fileName;
 sbLog.AppendFormat("第:{0}個文件名稱：{1}新名稱：{2}下載地址：<a href='{3}' target='_blank'>{2}</a><br/>", i + 1, fileName, fileNewName, string.Format(path, fileNewName));
 file.SaveAs(Path.Combine(uploadPath, fileNewName));
 }
 return Content(sbLog.ToString());
 }
 [HttpPost]
 public ActionResult B(IEnumerable<HttpPostedFileBase> files)
 {
 var sbLog = new StringBuilder(string.Empty);
 var fileCount = files == null ? 0 : files.Count();
 //訪問上傳文件地址
 var path = @"http://localhost:1010/{0}";
 //保存文件地址
 var uploadPath = @"D:\D\TTest";
 sbLog.AppendFormat("上傳文件目錄:{0}<br/>", uploadPath);
 sbLog.AppendFormat("上傳文件量:{0}<br/>", fileCount);
 var i = 0;
 foreach (var file in files)
 {
 if (file == null || string.IsNullOrEmpty(file.FileName)) { continue; }

 var fileName = file.FileName;
 var fileNewName = DateTime.Now.Ticks + fileName;
 sbLog.AppendFormat("第:{0}個文件名稱：{1}新名稱：{2}下載地址：<a href='{3}' target='_blank'>{2}</a><br/>", i + 1, fileName, fileNewName, string.Format(path, fileNewName));
 file.SaveAs(Path.Combine(uploadPath, fileNewName));
 }
 return Content(sbLog.ToString());
 }
 [HttpPost]
 public JsonResult C()
 {
 Thread.Sleep(1000 * 5);
 var response = new MoResponse();
 var sbLog = new StringBuilder("開始處理...");
 try
 {
 sbLog.AppendFormat("賬號：{0}<br/>", Request.Params["userName"]);
 sbLog.AppendFormat("密碼：{0}<br/>", Request.Params["userPwd"]);
 var fileCount = Request.Files.Count;
 //訪問上傳文件地址
 var path = @"http://localhost:1010/{0}";
 //保存文件地址
 var uploadPath = @"D:\D\TTest";
 sbLog.AppendFormat("上傳文件目錄:{0}<br/>", uploadPath);
 sbLog.AppendFormat("上傳文件量:{0}<br/>", fileCount);
 for (int i = 0; i < fileCount; i++)
 {
  var file = Request.Files[i];
  if (file == null || string.IsNullOrEmpty(file.FileName)) { continue; }
  var fileName = file.FileName;
  var fileNewName = DateTime.Now.Ticks + fileName;
  sbLog.AppendFormat("第:{0}個文件名稱：{1}新名稱：{2}下載地址：<a href='{3}' target='_blank'>{2}</a><br/>", i + 1, fileName, fileNewName, string.Format(path, fileNewName));
  file.SaveAs(Path.Combine(uploadPath, fileNewName));
  response.Status = 1;
 }
 }
 catch (Exception ex)
 {
 sbLog.AppendFormat("異常信息：{0}", ex.Message);
 }
 finally
 {
 response.Data = sbLog.ToString();
 }
 return Json(response);
 }
 /// <summary>
 /// 保存form提交的表單數(shù)據(jù)
 /// </summary>
 /// <returns></returns>
 [HttpPost]
 public JsonResult D()
 {
 var response = new MoResponse();
 var sbLog = new StringBuilder(string.Empty);
 try
 {
 //訪問上傳文件地址
 var path = @"http://localhost:1010/{0}";
 sbLog.AppendFormat("賬號：{0}<br/>", Request.Params["userName"]);
 sbLog.AppendFormat("密碼：{0}<br/>", Request.Params["userPwd"]);
 foreach (var item in Request.Params["hidFileNames"].Split(new char[] { '|' }, StringSplitOptions.RemoveEmptyEntries))
 {
  sbLog.AppendFormat("文件新名稱：{0};下載地址：<a href='{1}' target='_blank'>{0}</a><br/>", item, string.Format(path, item));
 }
 response.Status = 1;
 }
 catch (Exception ex)
 {
 sbLog.AppendFormat("異常信息：{0}", ex.Message);
 }
 finally
 {
 response.Data = sbLog.ToString();
 }
 return Json(response);
 }
 /// <summary>
 /// 獲取上傳文件信息
 /// </summary>
 /// <returns></returns>
 [HttpPost]
 public ContentResult D_A()
 {
 var response = new MoResponse();
 response.Data = "上傳失敗";
 try
 {
 Thread.Sleep(1000 * 3);
 var fileCount = Request.Files.Count;
 //保存文件地址
 var uploadPath = @"D:\D\TTest";
 var fileNames = string.Empty;
 for (int i = 0; i < fileCount; i++)
 {
  var file = Request.Files[i];
  if (file == null || string.IsNullOrEmpty(file.FileName)) { continue; }

  var fileName = file.FileName;
  var fileNewName = DateTime.Now.Ticks + fileName;
  file.SaveAs(Path.Combine(uploadPath, fileNewName));
  fileNames += fileNewName + "|";
 }
 if (!string.IsNullOrEmpty(fileNames))
 {

  response.Status = 1;
  response.Data = fileNames.TrimEnd('|');
 }
 }
 catch (Exception ex)
 {
 response.Data = ex.Message;
 }
 return Content(JsonConvert.SerializeObject(response));
 }
 }
 public class MoResponse
 {
 public object Data { get; set; }

 /// <summary>
 /// 0：失敗 1:成功
 /// </summary>
 public int Status { get; set; }
 }

View代碼：

@{
 ViewBag.Title = "上傳 - 示例";
}
<!DOCTYPE html>
<html>
<head>
 <title></title>
 <meta />
</head>
<body>
 <div class=" error-container">
 <fieldset>
 <legend>示例A - 普通表單上傳文件，Request.Files獲取上傳文件</legend>
 <form action="/Error/A" method="post" enctype="multipart/form-data">
 <input type="file" name="fileA" multiple />
 <button type="submit">提交</button>
 </form>
 </fieldset>
 <fieldset>
 <legend>示例B - 普通表單上傳文件，HttpPostedFileBase獲取上傳文件</legend>
 @using (Html.BeginForm("B", "Error", FormMethod.Post, new { enctype = "multipart/form-data" }))
 {
 <input type="file" name="files" multiple />
 <button>提交</button>
 }
 </fieldset>
 <fieldset>
 <legend>示例C - ajax+FormData上傳文件，Request.Files獲取上傳文件</legend>
 @using (Html.BeginForm("C", "Error", FormMethod.Post, new { enctype = "multipart/form-data", @id = "form_c" }))
 {
 <span>賬號：</span><input type="text" name="userName" value="神牛步行3" /><br />
 <span>密碼：</span><input type="password" name="userPwd" value="神牛" /><br />
 <span>文件：</span><input type="file" name="filesc" multiple /><br />
 <button type="button">提交</button><br />
 <span id="msg_c"></span>
 }
 </fieldset>
 <fieldset>
 <legend>示例D - 自定義上傳插件，Request.Files獲取上傳文件并提交表單內(nèi)容</legend>
 @using (Html.BeginForm("D", "Error", FormMethod.Post, new { enctype = "multipart/form-data", @id = "form_d" }))
 {
 <span>賬號：</span><input type="text" name="userName" value="神牛步行3" /><br />
 <span>密碼：</span><input type="password" name="userPwd" value="神牛" /><br />
 <span>文件：</span><input type="file" name="filesd" multiple /><br />
 <button type="button">提交</button><br />
 <span id="msg_d" style="color:red"></span>
 }
 </fieldset>
 </div>
</body>
</html>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="http://7xn3fx.com1.z0.glb.clouddn.com/js/PlugTool/shenniu.upfile-0.0.1.js"></script>
<script>
 $(function () {
 //示例D代碼
 //初始化插件
 var shenniu = new shenniu_UpFile({
 url: "/Error/D_A",
 fileEleName: "filesd"
 });
 //提交事件
 $("#form_d button[type='button']").click(function () {
 var msg = $("#msg_d");
 var btnSave = $(this);
 btnSave.attr("disabled", "disabled");
 msg.html("上傳中..");
 //上傳文件
 shenniu.submitFun(function (data) {
 try {
  var result = JSON.parse(data);
  //上傳成功，保存數(shù)據(jù)
  if (result.Status == 1) {
  //增加上傳成功的文件名稱到表單
  var hidFileNames = $("#form_d input[name='hidFileNames']");
  if (hidFileNames.length <= 0) { $("#form_d").append("<input type='hidden' name='hidFileNames' value='" + result.Data + "'/>"); }
  else {
  hidFileNames.val(result.Data);
  }
  //獲取表單鍵值對，提交表單數(shù)據(jù)
  var param = $("#form_d").serialize();
  var action = $("#form_d").attr("action");
  $.post(action, param, function (res) {
  msg.html(res.Status == 1 ? "保存成功<br/>" + res.Data : "保存失敗");
  });
  } else {
  msg.html(result.Data);
  }
 } catch (e) {
  console.log(e.message);
 } finally {
  btnSave.removeAttr("disabled");
 }
 });
 });
 })
</script>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: