ASP.NET MVC中使用jQuery Ajax經過FormData對象異步提交圖片文件到服務端保存並返回保存的圖片路徑

前言：

　　首先對於圖片上傳而言，在咱們的項目開發中能夠說出現的頻率是至關的高的。這篇文章中，我將要描述的是在咱們.Net中如何使用Jquery Ajax經過FormData對象異步提交圖片文件到後臺保存，並返回保存的圖片路徑展現出圖片，實現一個無刷新的異步圖片上傳的過程，固然這裏我講解的是單張圖片的保存過程，對於多圖片上傳的話其實咱們只須要在type='file'文本框中加上一個multiple可多選，而後獲取input中的文件數組遍歷向後臺提交感興趣的話能夠嘗試，不過下一篇博客將會講解如何使用Layui上傳多張圖片到服務端保存。

FormData對象概述：

　　FormData對象是H5中的一個新特性，用以將數據編譯成鍵值對，以便用XMLHttpRequest來發送數據。其主要用於發送表單數據，但亦可用於發送帶鍵數據(keyed data)，而獨立於表單使用。若是表單enctype屬性設爲multipart/form-data ，則會使用表單的submit()方法來發送數據，從而，發送數據具備一樣形式。比起普通的ajax,使用FormData的最大優勢就是咱們能夠異步上傳一個二進制文件。

關於FormData對象的使用參考文章：https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

Jquery Ajax經過FormData對象異步提交圖片文件：

HTML中選中圖片的按鈕：

<div>頭像</div>
<div class="tuxiang-up" id="headPortrait" style="background-image:url(/Content/ExSys/images/ktoux.jpg))">
<input type="file" onchange="uploadImage(this)">
<!--點擊上傳按鈕後，圖片縮略圖以上級背景圖片顯示--> 
</div>

Jquery中FormData二進制文件對象拼接和提交：

<script type="text/javascript">
//用戶頭像修改
function uploadImage(obj) {
var formData = new FormData();//建立FormData對象，以鍵值對的方式拼接form表單數據（multipart/form-data，圖片媒體文件）
//獲取input中的文件列表信息
 var files = $(obj).prop("files");
//拼接圖片文件流信息
console.log(files[0]);
formData.append("file", files[0]);
$.ajax({
url: "/FileUpload/FileLoad/",
type: 'POST',
data: formData,
async: false,
dataType: "json",
// 告訴jQuery不要去處理髮送的數據
processData: false,
// 告訴jQuery不要去設置Content-Type請求頭
contentType: false,
beforeSend: function () {
console.log("正在進行，請稍候");
},
success: function (data) {
if (data.isSuccess) {
console.log(data.path);
console.log("圖片上傳成功");
//動態賦值
$("#headPortrait").css("background-image", "url(" + data.path + ")");
} 
else {
console.log("網絡異常，請稍後再試");
}
},
 error: function (data) {
console.log("error2");
}
});
}
</script>    　

服務端接收Ajax異步提交的二進制圖片文件信息，並保存：

  1public class FileUploadController : Controller
  2{
  3/// <summary>
  4 /// 對驗證和處理 HTML 窗體中的輸入數據所需的信息進行封裝，如FromData拼接而成的文件
  5 /// </summary>
  6 /// <param name="context">FemContext對驗證和處理html窗體中輸入的數據進行封裝</param>
  7 /// <returns></returns>
  8 [HttpPost]
  9 public ActionResult FileLoad(FormContext context)
 10  {
 11 HttpPostedFileBase httpPostedFileBase = Request.Files[0];//獲取二進制圖片文件流
 12 if (httpPostedFileBase != null)
 13 {
 14 try
 15 {
 16 ControllerContext.HttpContext.Request.ContentEncoding = Encoding.GetEncoding("UTF-8");
 17 ControllerContext.HttpContext.Response.Charset = "UTF-8";
 18 
 19 string fileName = Path.GetFileName(httpPostedFileBase.FileName);//原始文件名稱
 20 string fileExtension = Path.GetExtension(fileName);//文件擴展名
 21 
 22 byte[] fileData = ReadFileBytes(httpPostedFileBase);//文件流轉化爲二進制字節
 23 
 24 string result = SaveFile(fileExtension, fileData);//文件保存
 25 if (string.IsNullOrEmpty(result))
 26 {
 27 return Json(new { isSuccess = false, path = "",errorMsg= "上傳文件失敗"});
 28 }
 29 
 30 return Json(new { isSuccess = true, path = result });
 31 }
 32 catch (Exception ex)
 33 {
 34 return Json(new { isSuccess = false, path = "" });
 35 }
 36 }
 37 else
 38 {
 39 return Json(new { isSuccess = false, path = "" });
 40 }
 41 }
 42 
 43 
 44 /// <summary>
 45 /// 將文件流轉化爲二進制字節
 46 /// </summary>
 47 /// <param name="fileData">圖片文件流</param>
 48 /// <returns></returns>
 49 private byte[] ReadFileBytes(HttpPostedFileBase fileData)
 50 {
 51 byte[] data;
 52 using (Stream inputStream = fileData.InputStream)
 53 {
 54 MemoryStream memoryStream = inputStream as MemoryStream;
 55 if (memoryStream == null)
 56 {
 57 memoryStream = new MemoryStream();
 58 inputStream.CopyTo(memoryStream);
 59 }
 60 data = memoryStream.ToArray();
 61 }
 62 return data;
 63 }
 64 
 65 /// <summary>
 66 /// 保存文件
 67 /// </summary>
 68 /// <param name="fileExtension">文件擴展名</param>
 69 /// <param name="fileData">圖片二進制文件信息</param>
 70 /// <returns></returns>
 71 private string SaveFile(string fileExtension, byte[] fileData)
 72 {
 73 string result;
 74 try
 75 {
 76 
 77 string saveName = Guid.NewGuid().ToString()+ fileExtension; //保存文件名稱
 78 
 79 // 文件上傳後的保存路徑
 80 string basePath = "UploadFile";
 81 string saveDir = DateTime.Now.ToString("yyyy-MM-dd");
 82 string savePath = System.IO.Path.Combine(saveDir, saveName);
 83 
 84 string serverDir = System.IO.Path.Combine(Server.MapPath("~/"), basePath, saveDir);
 85 if (!System.IO.Directory.Exists(serverDir))
 86 {
 87 System.IO.Directory.CreateDirectory(serverDir);
 88 }
 89 string fileNme = System.IO.Path.Combine(serverDir, saveName);//保存文件完整路徑
 90 System.IO.File.WriteAllBytes(fileNme, fileData);//WriteAllBytes建立一個新的文件，按照對應的文件流寫入，假如已存在則覆蓋
 91 //返回完整的圖片保存地址
 92 result="/"+basePath + "/" + saveDir + "/" + saveName;
 93 }
 94 catch (Exception)
 95 {
 96 result = "發生錯誤";
 97 }
 98 return result;
100 }
101 }