FormData的简单使用说明

FormData的简单使用说明

 

 

使用原因

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

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代码

<form id="uploadForm" enctype="multipart/form-data">
    <input id="file" type="file" name="file"/>
    <button id="upload" type="button">upload</button>
</form>

　　

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对象，不需要对数据做处理。
• <form>标签添加enctype="multipart/form-data"属性。
• cache设置为false，上传文件不需要缓存。
• contentType设置为false，不设置contentType值，因为是由<form>表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false。

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

 

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

HTML代码

<div id="uploadForm">
    <input id="file" type="file"/>
    <button id="upload" type="button">upload</button>
</div>

　　

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] 中我们可以看出，一个 <input type='file'> 标签能够上传多个文件，只需要在 <input type='file'> 里添加 multipe 或 multiple="multiple" 属性就好了。

 

 

服务器端读文件

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