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

前端之家收集整理的这篇文章主要介绍了H5 通过Ajax方式上传文件,使用FormData进行Ajax请求前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
通过 传统的form表单提交的方式上传文件
  1. <formid="uploadForm"action="http://localhost:8080/cfJAX_RS/rest/file/upload"method="post"enctype="multipart/form-data">
  2. h1>测试通过Rest接口上传文件</p>指定文件名:inputtype="text"name="filename"/>>上传文件inputtype="file"name="file">关键字1:inputtype="text"name="keyword">关键字2:>关键字3:inputtype="submit"value="上传"/>
  3. form>

不过传统的form表单提交会导致页面刷新, 但是在有些情况下,我们不希望页面被刷新,这种时候我们都是使用Ajax的方式进行请求的:
Js代码
    $.ajax({
  1. url:"http://localhost:8080/STS/rest/user",
  2. type:"POST",250)"> data:$('#postForm').serialize(),250)"> success:function(data){
  3. $('#serverResponse').html(data);
  4. },250)"> error: $('#serverResponse').html(data.status+":"+data.statusText+":"+data.responseText);
  5. }
  6. });

如上,通过 $( '#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" >
varoData=newFormData(document.forms.namedItem("fileinfo"));
  • oData.append("CustomField","Thisissomeextradata");
  • varoReq=newXMLHttpRequest();
  • oReq.open("POST","stash.PHP",true);
  • oReq.onload=function(oEvent){
  • if(oReq.status==200){
  • oOutput.innerHTML="Uploaded!";
  • }else{
  • oOutput.innerHTML="Error"+oReq.status+"occurreduploadingyourfile.<br\/>";
  • };
  • oReq.send(oData);
  • 参见: https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects

    使用FormData,进行Ajax请求并上传文件

    这里使用JQuery,但是老版本的JQuery比如1.2是不支持的,最好使用2.0或更新版本:
    formid="uploadForm"inputtype="text"name="filename"value=""inputtype="button"value="上传"onclick="doUpload()"

    functiondoUpload(){
  • varformData=newFormData($("#uploadForm")[0]);
  • url:'http://localhost:8080/cfJAX_RS/rest/file/upload',250)"> type:'POST',250)"> data:formData,250)"> async:false,250)"> cache: contentType: processData:function(returndata){
  • alert(returndata);
  • });
  • }
  • 猜你在找的Ajax相关文章