··························································

开发工具：Visual Studio 2015

关键技术：C#MVC、FormData

作者：邵亮华

撰写时间：2019-01-16

··························································

我在做后台管理项目时经常有需要提交二进制类型的数据,但是文件和图片类型的数据不能直接获取值。下面介绍HTML5 FormData 方法介绍以及实现文件上传

FormData 就是 XMLHttpRequest一个对象，利用它来提交表单、模拟表单提交，使用formData进行传递，好处是可以传递文件和图片。

FormData的基本用法：FormData对象，可以把所有表单元素的name与value组成一个queryString，提交到后台。只需要把 form 表单作为参数传入 FormData 构造函数即可：

1、var form = document.getElementById("form1");

2、 var formData = new FormData(form);

这样就可以直接通过ajax 的 send() 方法将 formData 发送到后台。

HTML

控制器

HTML

利用form表单

</div>

<p class="text-center">录入须知：上传的图片上限大小为10M！</p>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</form>

JS

processData设置为false。因为data值是FormData对象，不需要对数据做处理。

<form>标签添加enctype="multipart/form-data"属性。

cache设置为false，上传文件不需要缓存。

contentType设置为false。因为是由<form>表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false。

上传后，服务器端代码需要使用从查询参数名为file获取文件输入流对象，因为<input>中声明的是name="file"。

$("#Save").click(function () {

//new FormData的参数是一个DOM对象，而非jQuery对象

var formData = new FormData($("#fr")[0]);

$.ajax({

url: 'InsterShanZhai',

type: 'POST',

data: formData, // 上传formdata封装的数据

async: true,

// 下面三个参数要指定，如果不指定，会报一个JQuery的错误

cache: false, // 不缓存

contentType: false, // 不设置内容类型 jQuery不要去设置Content-Type请求头

processData: false, // jQuery不要去处理发送的数据

success: function (data) { //成功回调

if (msg == "新增成功!") {

layer.alert(data, { icon: 1, title: '提示' });

} else {

layer.alert(data, { icon: 0, title: '提示' });

}

当元素遇到错误（没有正确载入）时，发生 error 事件。

error() 方法触发 error 事件，或规定当发生 error 事件时运行的函数

error: function (data) {

alert(data);

}

});

控制器

由控制器接受数据，如图：

利用FormData提交图片或者文件类型的数据

HTML

JS

控制器

猜你喜欢