前言：
首先对于图片上传而言，在我们的项目开发中可以说出现的频率是相当的高的。这篇文章中，我将要描述的是在我们.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 }
