参考

FormData的基础知识

语法

var formData = new FormData(form)

参数:

form (可选):一个HTML 上的<form>表单元素——当指定了,这种方式创建的FormData对象会自动将form中的表单值也包含进去,包括文件内容也会被编码之后包含进去。

例子

下面的代码将创建一个空的FormData对象:

var formData = new FormData(); // 当前为空

你可以使用FormData.append来添加键/值对到表单里面;

formData.append('username', 'Chris');

或者你可以使用可选的form参数来创建一个带预置数据的FormData对象:

<form id="myForm" name="myForm">
  <div>
    <label for="username">Enter name:</label>
    <input type="text" id="username" name="username">
  </div>
  <div>
    <label for="useracc">Enter account number:</label>
    <input type="text" id="useracc" name="useracc">
  </div>
  <div>
    <label for="userfile">Upload file:</label>
    <input type="file" id="userfile" name="userfile">
  </div>
<input type="submit" value="Submit!">
</form>
var myForm = document.getElementById('myForm');
formData = new FormData(myForm);

文件上传

$('#upload').click(function(event){
    let formData = new FormData();
    //遍历所有选择的图片
    for(let file of document.getElementById('filename').files){
        formData.append('files',file,file.name);
    }
    //上传
    $.ajax({
        type: 'post',
        url: '/fileUpload',
        data: formData,
        mimeType: "multipart/form-data",
        contentType: false,
        cache: false,
        processData: false,
        success:function (data) {
            //回显图片:eval()解析返回的字符串
            app.addImgsToHtml(eval(data));
        }
    }).error(function (jqXHR, textStatus, errorThrown) {
        //错误信息
        console.log(jqXHR);
    });
})