文件上傳的幾個(gè)示例分享【推薦】

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

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

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

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

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

下面一步一個(gè)腳印的來分享：

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

首先，因?yàn)槲覀兩蟼魑募?，需要查看或者下載這個(gè)文件，通常分為兩種形式；一種把上傳的文件上傳到程序的根目錄中的某個(gè)文件夾中，這種就可以直接通過站點(diǎn)的虛擬路徑來訪問，這種其實(shí)也是使用了iis發(fā)布的；第二種是通過程序上傳到服務(wù)器的某個(gè)磁盤中，這種路徑通常就不在上傳程序站點(diǎn)的目錄下，因?yàn)橄胱層脩敉ㄟ^其他的url地址訪問下載文件，iis發(fā)布只是其中一種；其實(shí)用iss發(fā)布保存上傳文件的文件夾和發(fā)布程序一樣差不多；

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

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

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

這樣就完成了iis發(fā)布文件夾，當(dāng)然通過http訪問圖片只是多種方式的一種；有些后綴的文件可能訪問不了，需要手動(dòng)在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>

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

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

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

[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}個(gè)文件名稱：{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());
 }

這段代碼的總要點(diǎn)列舉如下：

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

最終我這個(gè)Action返回的是ContentResult，因?yàn)槲蚁朐陧撁孑斎胍恍┬畔⒑媒貓D哈哈，好了咋們通過復(fù)制上面的代碼運(yùn)行起來點(diǎn)"提交"按鈕得到的效果如圖：

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

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

經(jīng)過示例A描述的上傳，下載圖片流程應(yīng)該都很清楚了，這個(gè)小節(jié)主要是換了一種獲取上傳文件信息的方式，我們通過HttpPostedFileBase獲?。ㄆ鋵?shí)示例ARequest.Files的最底層就是這個(gè)），因?yàn)榭赡苌蟼鞫鄠€(gè)文件所以使用了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}個(gè)文件名稱：{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這個(gè)近幾年才被幾乎所有瀏覽器支持的js對象，它的構(gòu)造函數(shù)：new FormData (form? : HTMLFormElement)，后面的?號和C#參數(shù)差不多表示參數(shù)非必須，F(xiàn)ormData的最大優(yōu)點(diǎn)就是可以異步上傳一個(gè)二進(jìn)制文件，好吧這個(gè)神奇了；繼續(xù)來將示例C，通常我們提交一般的文字信息直接通過jquery的ajax，post，get等幾個(gè)方法就能傳遞到后臺(tái)，這些直接傳參方式無法吧file信息傳遞給后臺(tái)，但用到FormData我們就可以用ajax把file文件信息傳遞給后臺(tái)，這樣我們也可以有更好的無刷新效果的上傳文件了，先來看下前端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的格式差不多，只是增加了兩個(gè)input元素方便我們來測試；重點(diǎn)在js代碼中，由上面介紹可以看到FormData的構(gòu)造只能是HTMLFormElement，所以我們通過document.getElementById("form_c")來獲取這個(gè)表單的對象傳遞給它；

然后，我們用普通的$.ajax提交FormData對象到后臺(tái)進(jìn)行上傳，至于后臺(tái)我們參照示例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}個(gè)文件名稱：{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指向的路由，這樣用戶體驗(yàn)就好多了：

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

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

<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)鍵點(diǎn)已經(jīng)通過代碼注釋備注好了，朋友們可仔細(xì)閱讀下，這里要將的是插件上傳文件和提交表單數(shù)據(jù)的邏輯；我們分析下：

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

由上面幾點(diǎn)插件的參數(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ù)
 };

這個(gè)自定義插件原理和幾個(gè)重點(diǎn)是：

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

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

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

下面來看下效果圖：

示例D的后臺(tái)代碼分為兩部分：1.上傳文件的Action 2.真實(shí)獲取表單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));
 }

好了插件需要講解的就這么多，不知不覺有只剩我一個(gè)人了，該回家了，下面給出整體的代碼，插件代碼請使用連接獲?。?/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}個(gè)文件名稱：{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}個(gè)文件名稱：{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}個(gè)文件名稱：{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í)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: