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

通过传统的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({
     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">

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或更新版本：

<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>

 

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

 

评论

19 楼 lshhjxlj 2017-08-24  

大家这么多问题一问，估计楼主也懵逼了

18 楼 忆梦昔年 2017-05-04  

服务器端用java，框架是ssh怎么接收

17 楼 yyhuaisha 2017-03-22  

panda0924 写道

lhist 写道

为什么我用这个在浏览器的控制台报错，错误信息如下：
XMLHttpRequest cannot load http://localhost:1337/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.send
@ jquery-2.2.1.js:9175jQuery.extend.ajax
@ jquery-2.2.1.js:8656doUpload
@ t1.html:26onchange
@ t1.html:62

还有一条警告：
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.

怎么办？？

jquery要加两个参数。 $.ajax({
                type: "post",
                url: "/Uploadhelp/Upimg",
                data: formdata,
                contentType: false,
                processData: false,
                success: function (data) {
                }
            });这两个false的参数一个不能少

@qq237738572  人家说了老版本的jq不支持

16 楼 panda0924 2017-01-10  

善良一脉 写道

能用zepto.js中的ajax吗？？  我用的是zepto中的ajax来上传图片，报Illegal invocation（非法调用）

我用的jquery之前和你一样，加上这两个参数就好了
$.ajax({
                type: "post",
                url: "/Uploadhelp/Upimg",
                data: formdata,
                contentType: false,
                processData: false,
                success: function (data) {
                }
            });

15 楼 panda0924 2017-01-10  

lhist 写道

为什么我用这个在浏览器的控制台报错，错误信息如下：
XMLHttpRequest cannot load http://localhost:1337/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.send
@ jquery-2.2.1.js:9175jQuery.extend.ajax
@ jquery-2.2.1.js:8656doUpload
@ t1.html:26onchange
@ t1.html:62

还有一条警告：
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.

怎么办？？

jquery要加两个参数。 $.ajax({
                type: "post",
                url: "/Uploadhelp/Upimg",
                data: formdata,
                contentType: false,
                processData: false,
                success: function (data) {
                }
            });这两个false的参数一个不能少

14 楼 caption_1 2016-12-14  

dataType: "json",  这个设置好就没事了吧！！！

13 楼 absunique 2016-11-25  

LZ,请问这种情况下，表单其它字段怎么指定编码。

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
这个AJAX好像不读

12 楼 一如小溪 2016-11-03  

请问楼主，我也用了你这种方法上传文件，但是我通过URL去调用远程服务器上的接口的时候，需要传参数给它才能获得返回值，我是通过在header里面传参数的，但是一加上header，它就会报 跨域的 错误，什么同源策略...等等。如果我不通过header 传参（用户名，文件名）的话，是可以正常访问到对方的接口的，但是如果没有给它传参，他就报用户名无效，也就得不到所需要的返回值。 请问 在使用 AJAX formData 上传文件的时候，为什么不能通过设置header的方式传参呢，会报错！！！

11 楼 qq237738572 2016-10-25  

楼主不错，分享的很好。but:::

就没有人发现问题吗？我的jquery1.11版本，使用你的方法 为什么jquery报错呢？

错误信息 ：jquery.min.js?    Uncaught TypeError: Illegal invocation.

var jsonData = new FormData($("#video-second-form")[0]);
		                jsonData.append('file', $("#subtitle-file")[0].files[0]);
		                jsonData.append('name', $("#subtitle-file").val());
		                $.ajax({
		    	            type: "post",
		    	            url: APPNAME + "/video/transcoderSecond?type=replace",
		    	            dataType: 'json',
		    	            data: jsonData,//$("#video-second-form").serializeArray(),		    	            
		                    processData: false,
		                    contentType: false,
		    	            success: function (result) {
		    	                hideLoading();		    	                
		    	                Info.showInfo(result.message);		    	                
		    	            }
		    	        });

10 楼 追风的小志 2016-09-08  

d[color=red][/color]

9 楼 善良一脉 2016-08-18  

能用zepto.js中的ajax吗？？  我用的是zepto中的ajax来上传图片，报Illegal invocation（非法调用）

8 楼 zhao499356 2016-06-29  

java怎么解析文件啊

7 楼 jeffrey9061 2016-03-17  

非常感谢你，给我指点了迷津，让我实现了无刷新文件上传，非常感谢！！！
我在博客园写了一篇博客，里面引用到了你这篇文章，特地做了链接，以表感谢。但是，我另外还有一些小问题，如果您知道的，麻烦指点一二，谢谢。

6 楼 a8350020 2016-03-17  

很有用，在用百度的富文本的时候就是用的formData通过ajax提交的图片。但是用这种方式提交一直报400错误，后台接收不到请求，有点头疼···

5 楼 lhist 2016-03-08  

为什么我用这个在浏览器的控制台报错，错误信息如下：
XMLHttpRequest cannot load http://localhost:1337/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.send
@ jquery-2.2.1.js:9175jQuery.extend.ajax
@ jquery-2.2.1.js:8656doUpload
@ t1.html:26onchange
@ t1.html:62

还有一条警告：
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.

怎么办？？

4 楼 zxcq06 2015-12-22  

确实有用，解决了我纠结已久的问题，多谢楼主，特此注册顶贴。

3 楼 ch-y 2015-12-11  

帮了我的大忙，谢谢博主，赞一个

2 楼 yunzhu 2015-11-27  

空云万里晴 写道

日哦，服务端怎么解析的又不说。踩

兄台，我这个讲的是怎么用Ajax方式上传文件。

服务端怎么解析，那个要看服务端用的什么语言，还有用的什么框架，这之类的教程太多太多了。
你是想让我讲哪种呢？如果我讲的是服务端用Spring怎么解析，而你用的是PHP，你会不会说“日哦，PHP服务端怎么解析的又不说。踩”

1 楼 空云万里晴 2015-11-26  

日哦，服务端怎么解析的又不说。踩