通过Ajax方式上传文件，使用FormData进行Ajax请求

曾经终败给现在 2022-05-17 07:59 256阅读 0赞

### 转载自：[http://yunzhu.iteye.com/blog/2177923][http_yunzhu.iteye.com_blog_2177923] ###

## 通过传统的form表单提交的方式上传文件： ##

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 </td> 
 <td> <code>&lt;</code><code>form</code>&nbsp;<code>id= "uploadForm" action= "http://localhost:8080/cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data"&gt;&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>h1</code>&nbsp;<code>&gt;测试通过Rest接口上传文件 &lt;/</code><code>h1</code><code>&gt;&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>p</code>&nbsp;<code>&gt;指定文件名： &lt;</code><code>input</code>&nbsp;<code>type ="text" name="filename" /&gt;&lt;/</code><code>p</code><code>&gt;&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>p</code>&nbsp;<code>&gt;上传文件： &lt;</code><code>input</code>&nbsp;<code>type ="file" name="file" /&gt;&lt;/</code><code>p</code><code>&gt;&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>p</code>&nbsp;<code>&gt;关键字1： &lt;</code><code>input</code>&nbsp;<code>type ="text" name="keyword" /&gt;&lt;/</code><code>p</code><code>&gt;&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>p</code>&nbsp;<code>&gt;关键字2： &lt;</code><code>input</code>&nbsp;<code>type ="text" name="keyword" /&gt;&lt;/</code><code>p</code><code>&gt;&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>p</code>&nbsp;<code>&gt;关键字3： &lt;</code><code>input</code>&nbsp;<code>type ="text" name="keyword" /&gt;&lt;/</code><code>p</code><code>&gt;&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>input</code>&nbsp;<code>type ="submit" value="上传"/&gt;&nbsp;</code> <code>&lt;/</code><code>form</code><code>&gt;&nbsp;</code> </td> 
 </tr> 
 </tbody> 
</table>

不过传统的form表单提交会导致页面刷新，但是在有些情况下，我们不希望页面被刷新，这种时候我们都是使用Ajax的方式进行请求的：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 </td> 
 <td> <code>$.ajax({&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>url :&nbsp;</code><code>"http://localhost:8080/STS/rest/user"</code><code>,&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>type :&nbsp;</code><code>"POST"</code><code>,&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data : $(&nbsp;</code><code>'#postForm'</code><code>).serialize(),&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>success :&nbsp;</code><code>function</code><code>(data) {&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(&nbsp;</code><code>'#serverResponse'</code><code>).html(data);&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>error :&nbsp;</code><code>function</code><code>(data) {&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(&nbsp;</code><code>'#serverResponse'</code><code>).html(data.status +&nbsp;</code><code>" : "</code>&nbsp;<code>+ data.statusText +&nbsp;</code><code>" : "</code>&nbsp;<code>+ data.responseText);&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}&nbsp;</code> <code>});&nbsp;</code> </td> 
 </tr> 
 </tbody> 
</table>

如上，通过$('\#postForm').serialize()可以对form表单进行序列化，从而将form表单中的所有参数传递到服务端。

但是上述方式，只能传递一般的参数，上传文件的文件流是无法被序列化并传递的。

不过如今主流浏览器都开始支持一个叫做FormData的对象，有了这个FormData，我们就可以轻松地使用Ajax方式进行文件上传了。

## **关于FormData及其用法** ##

**FormData是什么呢？我们来看看Mozilla上的介绍。**

XMLHttpRequest Level 2添加了一个新的接口`FormData`.利用`FormData对象`,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的[`send()`][send]方法来异步的提交这个"表单".比起普通的ajax,使用`FormData`的最大优点就是我们可以异步上传一个二进制文件.

所有主流浏览器的较新版本都已经支持这个对象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。

参见：[https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/FormData][https_developer.mozilla.org_zh-CN_docs_Web_API_XMLHttpRequest_FormData]

这里只展示一个通过from表单来初始化FormData的方式

<form enctype=*"multipart/form-data"* method=*"post"* name=*"fileinfo"*>

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 </td> 
 <td> <code>var</code>&nbsp;<code>oData =&nbsp;</code><code>new</code>&nbsp;<code>FormData(document.forms.namedItem(</code><code>"fileinfo"</code>&nbsp;<code>));&nbsp;</code> <code>oData.append(&nbsp;</code><code>"CustomField"</code><code>,&nbsp;</code><code>"This is some extra data"</code>&nbsp;<code>);&nbsp;</code> <code>var</code>&nbsp;<code>oReq =&nbsp;</code><code>new</code>&nbsp;<code>XMLHttpRequest();&nbsp;</code> <code>oReq.open(&nbsp;</code><code>"POST"</code><code>,&nbsp;</code><code>"stash.php"</code>&nbsp;<code>,&nbsp;</code><code>true</code>&nbsp;<code>);&nbsp;</code> <code>oReq.onload =&nbsp;</code><code>function</code><code>(oEvent) {&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code>&nbsp;<code>(oReq.status == 200) {&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>oOutput.innerHTML =&nbsp;</code><code>"Uploaded!"</code>&nbsp;<code>;&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}&nbsp;</code><code>else</code>&nbsp;<code>{&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>oOutput.innerHTML =&nbsp;</code><code>"Error "</code>&nbsp;<code>+ oReq.status +&nbsp;</code><code>" occurred uploading your file.&lt;br \/&gt;"</code><code>;&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}&nbsp;</code> <code>};&nbsp;</code> <code>oReq.send(oData);&nbsp;</code> </td> 
 </tr> 
 </tbody> 
</table>

参见：[https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using\_FormData\_Objects][https_developer.mozilla.org_zh-CN_docs_Web_Guide_Using_FormData_Objects]

## **使用FormData，进行Ajax请求并上传文件** ##

这里使用JQuery，但是老版本的JQuery比如1.2是不支持的，最好使用2.0或更新版本：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>&lt;</code><code>form</code>&nbsp;<code>id= "uploadForm"&gt;&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>p</code>&nbsp;<code>&gt;指定文件名： &lt;</code><code>input</code>&nbsp;<code>type="text" name="filename" value= ""/&gt;&lt;/</code><code>p</code>&nbsp;<code>&gt;&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>p</code>&nbsp;<code>&gt;上传文件： &lt;</code><code>input</code>&nbsp;<code>type="file" name="file"/&gt;&lt;/&nbsp;</code><code>p</code><code>&gt;&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>input</code>&nbsp;<code>type="button" value="上传" onclick="doUpload()" /&gt;&nbsp;</code> <code>&lt;/</code><code>form</code><code>&gt;&nbsp;</code> </td> 
 </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 </td> 
 <td> <code>function</code>&nbsp;<code>doUpload() {&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>formData =&nbsp;</code><code>new</code>&nbsp;<code>FormData($(&nbsp;</code><code>"#uploadForm"</code>&nbsp;<code>)[0]);&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$.ajax({&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>url:&nbsp;</code><code>'http://localhost:8080/cfJAX_RS/rest/file/upload'</code>&nbsp;<code>,&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>type:&nbsp;</code><code>'POST'</code><code>,&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data: formData,&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>async:&nbsp;</code><code>false</code><code>,&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>cache:&nbsp;</code><code>false</code><code>,&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>contentType:&nbsp;</code><code>false</code><code>,&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>processData:&nbsp;</code><code>false</code><code>,&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>success:&nbsp;</code><code>function</code>&nbsp;<code>(returndata) {&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>alert(returndata);&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>error:&nbsp;</code><code>function</code>&nbsp;<code>(returndata) {&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>alert(returndata);&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});&nbsp;</code> <code>}&nbsp;</code> </td> 
 </tr> 
 </tbody> 
</table>

[http_yunzhu.iteye.com_blog_2177923]: http://yunzhu.iteye.com/blog/2177923
[send]: https://developer.mozilla.org/zh-CN/docs/DOM/XMLHttpRequest#send%28%29
[https_developer.mozilla.org_zh-CN_docs_Web_API_XMLHttpRequest_FormData]: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/FormData
[https_developer.mozilla.org_zh-CN_docs_Web_Guide_Using_FormData_Objects]: https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects