通過傳統的form表單送出的方式上傳檔案:
[html]view plain copy
print?
- <form id= "uploadForm" action= "http://localhost:8080/cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data">
- <h1 >測試通過Rest接口上傳檔案 </h1>
- <p >指定檔案名: <input type ="text" name="filename" /></p>
- <p >上傳檔案: <input type ="file" name="file" /></p>
- <p >關鍵字1: <input type ="text" name="keyword" /></p>
- <p >關鍵字2: <input type ="text" name="keyword" /></p>
- <p >關鍵字3: <input type ="text" name="keyword" /></p>
- <input type ="submit" value="上傳"/>
- </form>
<form id= "uploadForm" action= "http://localhost:8080/cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data">
<h1 >測試通過Rest接口上傳檔案 </h1>
<p >指定檔案名: <input type ="text" name="filename" /></p>
<p >上傳檔案: <input type ="file" name="file" /></p>
<p >關鍵字1: <input type ="text" name="keyword" /></p>
<p >關鍵字2: <input type ="text" name="keyword" /></p>
<p >關鍵字3: <input type ="text" name="keyword" /></p>
<input type ="submit" value="上傳"/>
</form>
不過傳統的form表單送出會導緻頁面重新整理,但是在有些情況下,我們不希望頁面被重新整理,這種時候我們都是使用Ajax的方式進行請求的。
Ajax的方式進行請求:
[javascript]- $.ajax({
- url : "http://localhost:8080/STS/rest/user",
- type : "POST",
- data : $( '#postForm').serialize(),
- success : function(data) {
- $( '#serverResponse').html(data);
- },
- error : function(data) {
- $( '#serverResponse').html(data.status + " : " + data.statusText + " : " + data.responseText);
- }
- });
$.ajax({
url : "http://localhost:8080/STS/rest/user",
type : "POST",
data : $( '#postForm').serialize(),
success : function(data) {
$( '#serverResponse').html(data);
},
error : function(data) {
$( '#serverResponse').html(data.status + " : " + data.statusText + " : " + data.responseText);
}
});
通常我們送出(使用submit button)時,會把form中的所有表格元素的name與value組成一個queryString,送出到背景。這用jQuery的方法來說,就是serialize。
通過$('#postForm').serialize()可以對form表單進行序列化,進而将form表單中的所有參數傳遞到服務端。
但是上述方式,隻能傳遞一般的參數,上傳檔案的檔案流是無法被序列化并傳遞的。
不過如今主流浏覽器都開始支援一個叫做FormData的對象,有了這個FormData,我們就可以輕松地使用Ajax方式進行檔案上傳了。
關于FormData及其用法
FormData是什麼呢?我們來看看Mozilla上的介紹。
XMLHttpRequest Level 2添加了一個新的接口 .利用 ,我們可以通過JavaScript用一些鍵值對來模拟一系清單單控件,我們還可以使用XMLHttpRequest的 方法來異步的送出這個"表單".比起普通的ajax,使用 的最大優點就是我們可以異步上傳一個二進制檔案. 所有主流浏覽器的較新版本都已經支援這個對象了,比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。 參見:https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/FormData |
Constructor
FormData()
想得到一個FormData對象:
|
W3c草案提供了三種方案來擷取或修改FormData。
方案1:建立一個空的FormData對象,然後再用append方法逐個添加鍵值對:
|
|
|
方案2:取得form元素對象,将它作為參數傳入FormData對象中!
|
|
方案3:利用form元素對象的getFormData方法生成它!
|
|
Method
FormData.append
本方法用于向已存在的鍵添加新的值,如該鍵不存在,建立之。
文法
formData.append(name, value);
formData.append(name, value, filename);
注: 通過 FormData.append()方法賦給字段的值若是數字會被自動轉換為字元(字段的值可以是一個Blob對象,一個File對象,或者一個字元串,剩下其他類型的值都會被自動轉換成字元串).
參數解釋
-
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.get
傳回給定鍵的第一個值
formData.append('username', 'Justin');
formData.append('username', 'Chris');
formData.get(username); // "Justin"
FormData.getAll
傳回給定鍵的所有值
formData.append('username', 'Justin');
formData.append('username', 'Chris');
formData.getAll(username); // ["Justin", "Chris"]
FormData.has
檢查是否包含給定鍵,傳回
true
或
false
formData.has(username);
FormData.set
設定給定鍵的值
formData.set(name, value);
formData.set(name, value, filename);
浏覽器相容情況
來自 MDN:
Desktop
Feature | Chrome | Firfox(Gecko) | Intenet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 7+ | 4.0(2.0) | 10+ | 12+ | 5+ |
append with filename | (Yes) | 22.0(22.0) | ? | ||
delete, get, getAll, has, set | Behind Flag | Not supported |
Mobile
Android | Chrome Android | Firfox Mobile (Gecko) | Firfox OS (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | |
---|---|---|---|---|---|---|---|
3.0 | 1.0.1 | ||||||
1.2 | |||||||
- 2015年06月04日釋出
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
,是以這裡設定為false。enctype="multipart/form-data"
上傳後,伺服器端代碼需要使用從查詢參數名為
file
擷取檔案輸入流對象,因為
<input>
中聲明的是
name="file"
。
如果不是用
<form>
表單構造
FormData
對象又該怎麼做呢?
2.使用FormData對象添加字段方式上傳檔案
<div id="uploadForm">
<input id="file" type="file"/>
<button id="upload" type="button">upload</button>
</div>
這裡沒有
<form>
标簽,也沒有
enctype="multipart/form-data"
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]
-
也要設定為‘false’。contentType
從代碼
$('#file')[0].files[0]
中可以看到一個
<input type="file">
标簽能夠上傳多個檔案,
隻需要在
<input type="file">
裡添加
multiple
或
multiple="multiple"
3.伺服器端讀檔案
從
Servlet 3.0
開始,可以通過
request.getPart()
request.getPars()
兩個接口擷取上傳的檔案。
轉載文章:
http://www.jianshu.com/p/46e6e03a0d53
https://segmentfault.com/a/1190000002875573
http://my.oschina.net/u/1866405/blog/335987
http://yunzhu.iteye.com/blog/2177923
https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects