Ajax方式上傳文件
阿新 • • 發佈:2017-10-14
str fun 進制 onclick 無法 來看 文件名 列表 itl 通過傳統的form表單提交的方式上傳文件:
Html代碼
FormData是什麽呢?我們來看看Mozilla上的介紹。
這裏使用JQuery,但是老版本的JQuery比如1.2是不支持的,最好使用2.0或更新版本: Html代碼
<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的方式進行請求的: Js代碼
$.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); } });
如上,通過$(‘#postForm‘).serialize()可以對form表單進行序列化,從而將form表單中的所有參數傳遞到服務端。 但是上述方式,只能傳遞一般的參數,上傳文件的文件流是無法被序列化並傳遞的。 不過如今主流瀏覽器都開始支持一個叫做FormData的對象,有了這個FormData,我們就可以輕松地使用Ajax方式進行文件上傳了。
關於FormData及其用法
FormData是什麽呢?我們來看看Mozilla上的介紹。
XMLHttpRequest Level 2添加了一個新的接口FormData .利用FormData對象 ,我們可以通過JavaScript用一些鍵值對來模擬一系列表單控件,我們還可以使用XMLHttpRequest的send() 方法來異步的提交這個"表單".比起普通的ajax,使用FormData 的最大優點就是我們可以異步上傳一個二進制文件.
所有主流瀏覽器的較新版本都已經支持這個對象了,比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
參見:https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/FormData
|
這裏只展示一個通過from表單來初始化FormData的方式 <form enctype="multipart/form-data" method="post" name="fileinfo"> Js代碼
var oData = new FormData(document.forms.namedItem("fileinfo" )); oData.append( "CustomField", "This is some extra data" ); var oReq = new XMLHttpRequest(); oReq.open( "POST", "stash.php" , true ); oReq.onload = function(oEvent) { if (oReq.status == 200) { oOutput.innerHTML = "Uploaded!" ; } else { oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br \/>"; } }; oReq.send(oData);
參見:https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects 使用FormData,進行Ajax請求並上傳文件
這裏使用JQuery,但是老版本的JQuery比如1.2是不支持的,最好使用2.0或更新版本: Html代碼
<form id= "uploadForm"> <p >指定文件名: <input type="text" name="filename" value= ""/></p > <p >上傳文件: <input type="file" name="file"/></ p> <input type="button" value="上傳" onclick="doUpload()" /> </form>
Js代碼
function doUpload() {
var formData = new FormData($( "#uploadForm" )[0]);
$.ajax({
url: ‘http://localhost:8080/cfJAX_RS/rest/file/upload‘ ,
type: ‘POST‘,
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (returndata) {
alert(returndata);
},
error: function (returndata) {
alert(returndata);
}
});
}
Ajax方式上傳文件