ASP.NET MVC中使用jQuery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径

简介: 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 }
相关文章
|
2月前
|
设计模式 前端开发 Java
了解 Spring MVC 架构、Dispatcher Servlet 和 JSP 文件的关键作用
Spring MVC 是 Spring 框架的一部分,是一个 Web 应用程序框架。它旨在使用 Model-View-Controller(MVC) 设计模式轻松构建Web应用程序。
39 0
|
3月前
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
29 0
|
2月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
33 0
|
2月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
|
28天前
|
前端开发 JavaScript
Jquery ajax捕获错误信息
Jquery ajax捕获错误信息
13 0
|
28天前
|
前端开发
.net core mvc获取IP地址和IP所在地(其实是百度的)
.net core mvc获取IP地址和IP所在地(其实是百度的)
67 0
|
28天前
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
19 0
|
1月前
|
前端开发 JavaScript Java
springboot 出现 Cannot resolve MVC View ‘index‘ 问题解决办法,前后端不分离项目前端文件存放位置,已经如何访问
springboot 出现 Cannot resolve MVC View ‘index‘ 问题解决办法,前后端不分离项目前端文件存放位置,已经如何访问
23 0
|
1月前
|
JSON 缓存 前端开发
Jquery中AJAX的应用
Jquery中AJAX的应用
37 0
|
2月前
|
JSON 前端开发 JavaScript
jQuery中ajax的使用
jQuery中ajax的使用

相关产品

  • 云迁移中心