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

发布时间：2020-12-16 02:58:37 所属栏目：百科来源：网络整理

导读：通过传统的 form表单提交的方式上传文件： Html代码?? form ? id =? "uploadForm" ? action =? "http://localhost:8080/cfJAX_RS/rest/file/upload" ? method =? "post" ? enctype ?= "multipart/form-data" ?? ????? h1 ? 测试通过Rest接口上传文件? / h1

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

     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);??
??????????}??
?????});??
} ?

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!