前言:

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

  1. <div>头像</div>
  2. <div class="tuxiang-up" id="headPortrait" style="background-image:url(/Content/ExSys/images/ktoux.jpg))">
  3. <input type="file" onchange="uploadImage(this)">
  4. <!--点击上传按钮后,图片缩略图以上级背景图片显示-->
  5. </div>

Jquery中FormData二进制文件对象拼接和提交:

  1. <script type="text/javascript">
  2. //用户头像修改
  3. function uploadImage(obj) {
  4. var formData = new FormData();//创建FormData对象,以键值对的方式拼接form表单数据(multipart/form-data,图片媒体文件)
  5. //获取input中的文件列表信息
  6. var files = $(obj).prop("files");
  7. //拼接图片文件流信息
  8. console.log(files[0]);
  9. formData.append("file", files[0]);
  10. $.ajax({
  11. url: "/FileUpload/FileLoad/",
  12. type: 'POST',
  13. data: formData,
  14. async: false,
  15. dataType: "json",
  16. // 告诉jQuery不要去处理发送的数据
  17. processData: false,
  18. // 告诉jQuery不要去设置Content-Type请求头
  19. contentType: false,
  20. beforeSend: function () {
  21. console.log("正在进行,请稍候");
  22. },
  23. success: function (data) {
  24. if (data.isSuccess) {
  25. console.log(data.path);
  26. console.log("图片上传成功");
  27. //动态赋值
  28. $("#headPortrait").css("background-image", "url(" + data.path + ")");
  29. }
  30. else {
  31. console.log("网络异常,请稍后再试");
  32. }
  33. },
  34. error: function (data) {
  35. console.log("error2");
  36. }
  37. });
  38. }
  39. </script>  

服务端接收Ajax异步提交的二进制图片文件信息,并保存:

  1. public 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[];//获取二进制图片文件流
  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. /// <summary>
  44. /// 将文件流转化为二进制字节
  45. /// </summary>
  46. /// <param name="fileData">图片文件流</param>
  47. /// <returns></returns>
  48. private byte[] ReadFileBytes(HttpPostedFileBase fileData)
  49. {
  50. byte[] data;
  51. using (Stream inputStream = fileData.InputStream)
  52. {
  53. MemoryStream memoryStream = inputStream as MemoryStream;
  54. if (memoryStream == null)
  55. {
  56. memoryStream = new MemoryStream();
  57. inputStream.CopyTo(memoryStream);
  58. }
  59. data = memoryStream.ToArray();
  60. }
  61. return data;
  62. }
  63.  
  64. /// <summary>
  65. /// 保存文件
  66. /// </summary>
  67. /// <param name="fileExtension">文件扩展名</param>
  68. /// <param name="fileData">图片二进制文件信息</param>
  69. /// <returns></returns>
  70. private string SaveFile(string fileExtension, byte[] fileData)
  71. {
  72. string result;
  73. try
  74. {
  75.  
  76. string saveName = Guid.NewGuid().ToString()+ fileExtension; //保存文件名称
  77.  
  78. // 文件上传后的保存路径
  79. string basePath = "UploadFile";
  80. string saveDir = DateTime.Now.ToString("yyyy-MM-dd");
  81. string savePath = System.IO.Path.Combine(saveDir, saveName);
  82.  
  83. string serverDir = System.IO.Path.Combine(Server.MapPath("~/"), basePath, saveDir);
  84. if (!System.IO.Directory.Exists(serverDir))
  85. {
  86. System.IO.Directory.CreateDirectory(serverDir);
  87. }
  88. string fileNme = System.IO.Path.Combine(serverDir, saveName);//保存文件完整路径
  89. System.IO.File.WriteAllBytes(fileNme, fileData);//WriteAllBytes创建一个新的文件,按照对应的文件流写入,假如已存在则覆盖
  90. //返回完整的图片保存地址
  91. result="/"+basePath + "/" + saveDir + "/" + saveName;
  92. }
  93. catch (Exception)
  94. {
  95. result = "发生错误";
  96. }
  97. return result;
  98. }
  99. }

  

.Net之使用Jquery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径的更多相关文章

  1. 通过jQuery Ajax使用FormData对象上传文件

    FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...

  2. 通过jQuery Ajax使用FormData对象上传文件 (转载)

    XMLHttpRequest Level 2 添加了一个新的接口——FormData.与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件.jQuery 2.0+ ...

  3. [转] 通过jQuery Ajax使用FormData对象上传文件

    FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...

  4. jQuery Ajax使用FormData上传文件和其他数据,后端web.py获取

    参考博文: 通过jQuery Ajax使用FormData对象上传文件 方法一:使用<form>表单初始化FormData对象方式上传文件 前端(JQuery): <form enc ...

  5. IT轮子系列(四)——使用Jquery+formdata对象 上传 文件

    前言 在MVC 中文件的上传,一般都采用控件: <h2>IT轮子四——文件上传</h2> <div> <input type="file" ...

  6. SpringMVC中使用Ajax POST请求以json格式传递参数服务端通过request.getParameter("name")无法获取参数值问题分析

    SpringMVC中使用Ajax POST请求以json格式传递参数服务端通过request.getParameter("name")无法获取参数值问题分析 一:问题demo展示 ...

  7. JQuery Ajax 使用FormData上传文件对象

    FormData部分: 先new FormData对象 :let somedata = new FormData(),然后将数据添加进去,这里我们使用append()进行添加. 这里举一个上传头像的例 ...

  8. 通过Ajax使用FormData对象无刷新上传文件

    写在前面:本文说的这个方案有浏览器兼容性问题:所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+.Firefox 4+.IE 10+.Opera 12+.Safari 5+,对兼容性比 ...

  9. Ajax进阶 FormData对象

    Ajax基础:http://www.cnblogs.com/-beyond/p/7919369.html xhr 2.0及FormData介绍 FormData对象 其实和 XMLHttpReques ...

随机推荐

  1. Qt5官方demo分析集10——Qt Quick Particles Examples - Emitters

    此系列的所有文章都可以在这里查看http://blog.csdn.net/cloud_castle/article/category/2123873 前段时间去听了Qt在北京的开发人员大会,感觉QML ...

  2. Java数据存储机制的实现

    原文地址:http://yanwushu.sinaapp.com/java_data_storage/ Java程序在执行时须要为一系列的值或者对象分配内存,这些值都存在什么地方?用什么样的数据结构存 ...

  3. WPF - 模板查看工具:Show Me The Template及如何查看第三方主题

    原文:WPF - 模板查看工具:Show Me The Template及如何查看第三方主题 在学习WPF的模板(DataTemplate.ItemsPanelTemplate.ControlTemp ...

  4. WPF MVVM+EF 增删改查 简单示例(一)

    实现了那些功能,先看看效果图: 项目工程目录: 接下来开始具体的步骤: 第一步:在VS中新建工程 第二步:使用NuGet 安装EntityFramework 第三步:使用NuGet 安装EntityF ...

  5. Android微信支付SDK

    App对接微信调起微信支付需要在微信平台注册,鉴别的标识就是App的包名,所以将申请的包名单独打包成一个Apk文件,则在其他的App调起此Apk的时候同样可以起到调用微信支付的功能.这样就实现了调起微 ...

  6. Windows 10开发基础——启动默认应用的URI

    主要内容:通过指定的URI来启动默认的应用(设置,应用商店,地图,人脉) 方法一:直接在XAML中添加如下代码 <TextBlock x:Name="LocationDisabledM ...

  7. 从零开始学习音视频编程技术(三) 开发环境搭建(Qt4.86手动设置环境,主要就是设置g++和qmake,比较透彻,附下载链接)

    1.先下载安装Qt 我们使用的版本是4.8. 可以自行百度下载也可以从下面的网盘地址下载: Qt库和编译器下载: 链接:http://pan.baidu.com/s/1hrUxLIG 密码:0181 ...

  8. Qt Widget 利用 Qt4.5 实现酷炫透明窗体

    本文讲述的是Qt Widget 利用 Qt4.5 实现酷炫透明窗体,QWidget类中的每一个窗口部件都是矩形,并且它们按Z轴顺序排列的.一个窗口部件可以被它的父窗口部件或者它前面的窗口部件盖住一部分 ...

  9. Hadoop Streaming框架学习(二)

    1.常用Streaming命令介绍 使用下面的命令运行Streaming MapReduce程序: 1: $HADOOP_HOME/bin/hadoop/hadoop streaming args 其 ...

  10. Delphi7 时钟(使用了多个自定义组件)

    http://download.csdn.net/detail/akof1314/3073289