前言:

  首先对于图片上传而言,在我们的项目开发中可以说出现的频率是相当的高的。这篇文章中,我将要描述的是在我们.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异步提交的二进制图片文件信息,并保存:

public class FileUploadController : Controller
{
/// <summary>
/// 对验证和处理 HTML 窗体中的输入数据所需的信息进行封装,如FromData拼接而成的文件
/// </summary>
/// <param name="context">FemContext对验证和处理html窗体中输入的数据进行封装</param>
/// <returns></returns>
[HttpPost]
public ActionResult FileLoad(FormContext context)
{
HttpPostedFileBase httpPostedFileBase = Request.Files[];//获取二进制图片文件流
if (httpPostedFileBase != null)
{
try
{
ControllerContext.HttpContext.Request.ContentEncoding = Encoding.GetEncoding("UTF-8");
ControllerContext.HttpContext.Response.Charset = "UTF-8"; string fileName = Path.GetFileName(httpPostedFileBase.FileName);//原始文件名称
string fileExtension = Path.GetExtension(fileName);//文件扩展名 byte[] fileData = ReadFileBytes(httpPostedFileBase);//文件流转化为二进制字节 string result = SaveFile(fileExtension, fileData);//文件保存
if (string.IsNullOrEmpty(result))
{
return Json(new { isSuccess = false, path = "",errorMsg= "上传文件失败"});
} return Json(new { isSuccess = true, path = result });
}
catch (Exception ex)
{
return Json(new { isSuccess = false, path = "" });
}
}
else
{
return Json(new { isSuccess = false, path = "" });
}
} /// <summary>
/// 将文件流转化为二进制字节
/// </summary>
/// <param name="fileData">图片文件流</param>
/// <returns></returns>
private byte[] ReadFileBytes(HttpPostedFileBase fileData)
{
byte[] data;
using (Stream inputStream = fileData.InputStream)
{
MemoryStream memoryStream = inputStream as MemoryStream;
if (memoryStream == null)
{
memoryStream = new MemoryStream();
inputStream.CopyTo(memoryStream);
}
data = memoryStream.ToArray();
}
return data;
} /// <summary>
/// 保存文件
/// </summary>
/// <param name="fileExtension">文件扩展名</param>
/// <param name="fileData">图片二进制文件信息</param>
/// <returns></returns>
private string SaveFile(string fileExtension, byte[] fileData)
{
string result;
try
{ string saveName = Guid.NewGuid().ToString()+ fileExtension; //保存文件名称 // 文件上传后的保存路径
string basePath = "UploadFile";
string saveDir = DateTime.Now.ToString("yyyy-MM-dd");
string savePath = System.IO.Path.Combine(saveDir, saveName); string serverDir = System.IO.Path.Combine(Server.MapPath("~/"), basePath, saveDir);
if (!System.IO.Directory.Exists(serverDir))
{
System.IO.Directory.CreateDirectory(serverDir);
}
string fileNme = System.IO.Path.Combine(serverDir, saveName);//保存文件完整路径
System.IO.File.WriteAllBytes(fileNme, fileData);//WriteAllBytes创建一个新的文件,按照对应的文件流写入,假如已存在则覆盖
//返回完整的图片保存地址
result="/"+basePath + "/" + saveDir + "/" + saveName;
}
catch (Exception)
{
result = "发生错误";
}
return result;
}
}

  

.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. Matlab Tricks(二十六)—— 置乱(随机化)与恢复(shuffle/permutation & restore)

    x = 1:10; n = length(x); perm = randperm(n); x_perm = x(perm); % x_perm 表示置乱后的结果 x_ori(perm) = x_per ...

  2. WPF“天狗食月”效果

    原文:WPF"天狗食月"效果 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/yangyisen0713/article/deta ...

  3. 代码首要的目标应该是“解决问题”(包括“没有 bug”),其次的目标才是“简单优雅”。

    什么是现实理想主义者 曾经有人看了我的文章,以为我是一个“理想主义者”,来找我聊天.他说:“你知道吗,我跟你一样喜欢简单优雅的代码.上次我在某公司工作,看到他们的代码乱得不成样子,二话没说给他们重写了 ...

  4. 初次使用glog

    一.安装配置 1.简单介绍 google 出的一个C++轻量级日志库,支持下面功能: ◆ 參数设置,以命令行參数的方式设置标志參数来控制日志记录行为: ◆ 严重性分级,依据日志严重性分级记录日志: ◆ ...

  5. (015)实现一个函数来检查是否平衡树(keep it up)

    实现一个函数来检查是否平衡树.这个问题而言. 平衡指的是这棵树随意两个叶子结点到根结点的距离之差不大于1. 这个题我们能够採用暴力搜索,找到叶子节点到根节点的最小值和最大值.然后他们的差假设大于1就不 ...

  6. SQL查询表结构 相关语句

    --查看列注释select * from all_col_comments where table_name=upper('XXXXX')--查看表结构select * from user_tab_c ...

  7. NPM镜像设置方法!

    使用npm安装一些包失败了的看过来(npm国内镜像介绍) 发布于 2012-4-26 04:19 最后一次编辑是 2013-12-11 23:21 这个也是网上搜的,亲自试过,非常好用! 镜像使用方法 ...

  8. EF ModelFirst 步骤

    1 新建实体数据模型 ,选择空模型 2 建各个实体,并指定各字段属性,字符串需要指定长度 3 添加关系,选择关系类型,勾选添加外键 4 新建空的数据库,然后在edmx文件的空白处点右键,选择从模型生成 ...

  9. WP 8.1 中挂起时页面数据保存方式(1)

    1.保存到Applicaion Data配置信息中: 保存: privatevoid testTB_TextChanged(object sender, TextChangedEventArgs e) ...

  10. Redaht7/Oracle Linux7 + ORA11g : ohasd fails to start(Doc ID 1959008.1)

    APPLIES TO: Oracle Database - Standard Edition - Version 11.2.0.4 to 12.1.0.1 [Release 11.2 to 12.1] ...