formdata 赋值_FormData的简单使用说明

FormData的简单使用说明

使用原因

在我们进行数据前端和后端的额交互的时候，有的时候我们需要向后端提交一些文件数据，但是又不希望页面立即刷新，这个时候我们可以使用 ajax 请求，如果直接通过键值对的普通方式进行提交那么提交将会失败，所以这个时候我们需要用到FormData，现在大多数浏览器已经兼容，如果想要通过 Form表单直接上传文件，可以点击下面链接

创建FormData对象

方案一：

创建一个空的FormData对象，然后再用append方法逐个添加键值对：

var formdata = new FormData();

formdata.append("name", "呵呵");

formdata.append("url", "http://www.baidu.com/");

方案二：

取得form元素对象，将它作为参数传入FormData对象中！

var formobj = document.getElementById("form");

var formdata = new FormData(formobj);

方案三：

利用form元素对象的getFormData方法生成它！

var formobj = document.getElementById("form");

var formdata = formobj.getFormData()

使用FormData对象的一些方法

FormData.append

formData.append(name, value);

通过FormData.append()方法赋值，如果值是数字会被自动转换成字符串；

FormData.delete

formData.delete(username);

删除一组键值对

FormData.get

formData.append('username', 'Justin');

formData.append('username', 'Chris');

formData.get(username); // "Justin"

从FromData中拿到一个值

FormData.getAll

formData.append('username', 'Justin');

formData.append('username', 'Chris');

formData.getAll(username); // ["Justin", "Chris"]

获取到FormData的所有值

FormData.has

formData.has(username);

判断这个对象中是否包含给定的键，返回 true 或 false

FormData.set

formData.set(name, value);

为键设置值

Ajax通过FormData上传文件

HTML代码

upload

javascript代码

$.ajax({

url: '/upload',

type: 'POST',

cache: false,

data: new FormData($('#uploadForm')[0]),

processData: false,

contentType: false

}).done(function(res) {

}).fail(function(res) {});

注意点

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

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

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

contentType设置为false，不设置contentType值，因为是由

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

上传后，服务器端需要使用插叙参数名为 file 来获取对象，应为中声明的是 name='file'。

使用FormData对象添加字段方式上传文件

HTML代码

upload

javascript代码

var formData = new FormData();

formData.append('file', $('#file')[0].files[0]);

$.ajax({

url: '/upload',

type: 'POST',

cache: false,

data: formData,

processData: false,

contentType: false

}).done(function(res) {

}).fail(function(res) {});

注意点

append()的第二个参数应是文件对象，即$('#file')[0].files[0]。

contentType也要设置为‘false’。

从代码中 $('#file')[0].files[0] 中我们可以看出，一个 标签能够上传多个文件，只需要在 里添加 multipe 或 multiple="multiple" 属性就好了。

服务器端读文件

fileObj = request.FILES.get(“”前端设置的名字，或默认的名字“)