通过Ajax⽅式上传⽂件，使⽤FormData进⾏Ajax请求
通过传统的form表单提交的⽅式上传⽂件：
[html]
1. <form id= "uploadForm" action= "localhost:8080/cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data">
2. <h1 >测试通过Rest接⼝上传⽂件 </h1>
3. <p >指定⽂件名： <input type ="text" name="filename" /></p>
4. <p >上传⽂件： <input type ="file" name="file" /></p>
5. <p >关键字1： <input type ="text" name="keyword" /></p>
6. <p >关键字2： <input type ="text" name="keyword" /></p>
7. <p >关键字3： <input type ="text" name="keyword" /></p>
8. <input type ="submit" value="上传"/>
9. </form>
不过传统的form表单提交会导致页⾯刷新，但是在有些情况下，我们不希望页⾯被刷新，这种时候我们都是使⽤Ajax的⽅式进⾏请求的。
为什么要用ajaxAjax的⽅式进⾏请求：
[javascript]
1. $.ajax({
2. url : "localhost:8080/STS/rest/user",
3. type : "POST",
4. data : $( '#postForm').serialize(),
5. success : function(data) {
6. $( '#serverResponse').html(data);
7. },
8. error : function(data) {
9. $( '#serverResponse').html(data.status + " : " + data.statusText + " : " + sponseText);
10. }
11. });
通常我们提交（使⽤submit button）时，会把form中的所有表格元素的name与value组成⼀个queryString，提交到后台。这⽤jQuery的⽅法来说，就是serialize。
通过$('#postForm').serialize()可以对form表单进⾏序列化，从⽽将form表单中的所有参数传递到服务端。
但是上述⽅式，只能传递⼀般的参数，上传⽂件的⽂件流是⽆法被序列化并传递的。
不过如今主流浏览器都开始⽀持⼀个叫做FormData的对象，有了这个FormData，我们就可以轻松地使⽤Ajax⽅式进⾏⽂件上传了。
关于FormData及其⽤法
FormData是什么呢？我们来看看Mozilla上的介绍。
XMLHttpRequest Level 2添加了⼀个新的接⼝FormData.利⽤FormData对象，我们可以通过JavaScript⽤⼀些键值对来模拟⼀系列表单控件，我们还可以使⽤XMLHttpRequest的⽅法来异步的提交这个"表单".⽐起普通的ajax，使⽤FormData的最⼤优点就是我们可以异步上传⼀个⼆进制⽂件.
所有主流浏览器的较新版本都已经⽀持这个对象了，⽐如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
参见：
Constructor
FormData()
想得到⼀个FormData对象：
var formdata = new FormData();
W3c草案提供了三种⽅案来获取或修改FormData。
⽅案1：创建⼀个空的FormData对象，然后再⽤append⽅法逐个添加键值对：
var formdata = new FormData();
formdata.append("name", "呵呵");
formdata.append("url", "www.baidu/");
⽅案2：取得form元素对象，将它作为参数传⼊FormData对象中！
var formobj = ElementById("form");
var formdata = new FormData(formobj);
⽅案3：利⽤form元素对象的getFormData⽅法⽣成它！
var formobj = ElementById("form");
var formdata = FormData()
Method
FormData.append
本⽅法⽤于向已存在的键添加新的值，如该键不存在，新建之。
语法
formData.append(name, value);
formData.append(name, value, filename);
注: 通过⽅法赋给字段的值若是数字会被⾃动转换为字符(字段的值可以是⼀个对象,⼀个对象，或者⼀个字符串，剩下其他类型的值都会被⾃动转换成字符串).
参数解释
name
键 (key)，对应表单域
value
表单域的值
filename (optional)
The filename reported to the server (a USVString), when a Blob or File is passed as the second parameter. The default filename for Blob objects is "blob".
FormData.delete
将⼀对键和值从 FormData 对象中删除。
formData.delete(username);
<
返回给定键的第⼀个值
formData.append('username', 'Justin');
formData.append('username', 'Chris');
<(username); // "Justin"
返回给定键的所有值
formData.append('username', 'Justin');
formData.append('username', 'Chris');
FormData.has
检查是否包含给定键，返回true或false
formData.has(username);
FormData.set
设置给定键的值
formData.set(name, value);
formData.set(name, value, filename);
浏览器兼容情况
来⾃：
Desktop
Feature Chrome Firfox(Gecko)Intenet Explorer Opera Safari
Basic support7+ 4.0(2.0)10+12+5+
append with filename(Yes)22.0(22.0)???
delete, get, getAll, has, set Behind Flag Not supported Not supported(Yes)Not supported
Mobile
Feature Android Chrome
Android Firfox Mobile
(Gecko)
Firfox OS
(Gecko)
IE Mobile Opera
Mobile
Safari Mobile
Basic support 3.0? 4.0(2.0) 1.0.1?12+? append with filename??22.0(22.0) 1.2???
delete, get, getAll, has, set (Yes)(Yes)Not supported Not supported
Not
supported
(Yes)
Not
supported
Ajax通过FormData上传⽂件
1.使⽤<form>表单初始化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"。
如果不是⽤<form>表单构造FormData对象⼜该怎么做呢？
2.使⽤FormData对象添加字段⽅式上传⽂件
HTML代码
<div id="uploadForm">
<input id="file" type="file"/>
<button id="upload" type="button">upload</button>
</div>
这⾥没有<form>标签，也没有enctype="multipart/form-data"属性。
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">⾥添加multiple或multiple="multiple"属性。
3.服务器端读⽂件
从Servlet 3.0开始，可以通过Part()或Pars()两个接⼝获取上传的⽂件。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论