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 }

 

　　

原文出處：https://www.cnblogs.com/Can-daydayup/p/11124668.html