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

Posted 2020-07-14 理舞

在使用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: false,  
          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".