使用ajax上传表单（带文件）

在使用form表单的时候上传文件+表单，会使得页面跳转，而在某些时候不希望跳转，只变化页面中的局部信息

通过查找资料，可以使用FormData进行ajax操作。

FormData介绍：XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.

<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]);  // 要求使用的html对象
     $.ajax({
          url: 'http://localhost:8080/cfJAX_RS/rest/file/upload' ,
          type: 'POST',
          data: formData,
          async: true,
          // 下面三个参数要指定，如果不指定，会报一个JQuery的错误 
　　　　　　cache: false,
          contentType: false,
          processData: false,
          success: function (returndata) {
              alert(returndata);
          },
          error: function (returndata) {
              alert(returndata);
          }
     });
} 

通过上面代码就可实现ajax提交带文件的form表单信息。

FormData还可以使用纯的js方式编写。

构造函数

new FormData (optional HTMLFormElement form)

参数

form

(可选) 一个HTML表单元素,可以包含任何形式的表单控件,包括文件输入框.

方法

append()

给当前FormData对象添加一个键/值对.

void append(DOMString name, Blob value, optional DOMString filename);
void append(DOMString name, DOMString value);

参数值

name

字段名称.

value

字段值.可以是,或者一个字符串,如果全都不是,则该值会被自动转换成字符串.

filename(可选)

　　  指定文件的文件名,当value参数被指定为一个Blob对象或者一个File对象时,该文件名会被发送到服务器上,对于Blob对象来说,这个值默认为"blob".

后端接收方法中，参数

@RequestParam(value = "file", required = false)MultipartFile file

如果在上传文件时，返回值带

<pre style="word-wrap:break-word;white-space:prewrap;">xxx</pre>

在后台设置response可去点标签<pre>

response.setContentType("text/html; charset=utf-8");