FormData混合提交

 

使用FormData存储数据，ajax提交表单  流文件与普通表单混合上传

FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使用。如果表单enctype属性设为multipart/form-data ，则会使用表单的submit()方法来发送数据，从而，发送数据具有同样形式。

// html部分  

// 编码类型设置为：enctype =‘multipart/form-data’之后通过formData传输的数据格式和表单通过submit()方法传输的数据格式是一样的

var formdata = new FormData()
// 获取填写的信息
var a = $('#a').val(),
    b = $('#b').val(),
    c = $('#c').val()

formdata.append('a', a)
formdata.append('b', b)
formdata.append('c', c)
formdata.append('file', $('input[type=file')[0].files[0]

$.ajax({
    url: '',
    data: formdata,
    processData: false, // 不进行数据处理
    contentType: false, // 不设置编码类型
    dataType: 'json',
    success: function (data) {
        
    }
})

contentType

类型：Boolean 
默认值: true。默认情况下，原生form表单在提交的时候为 application/x-www-form-urlencoded ，jq中的ajax默认的编码类型为application/x-www-form-urlencoded;charset=utf-8 ，在进行文件流与普通字符串混合上传的时候，需要设置为false；又因为在form上写入了enctype="multipart/form-data" ，会以form上的为准。

在开发工具中查看到的Content-Type:multipart/form-data;boundary= xxxxxxxxxxxxxx， boundary为分界符，默认是不需要我们手动设置的，浏览器会自动生成，用来拆分我们提交的表单的各项数据

contentType还有很多其他的类型，遇到的时候再进行记录

 

processData

类型：Boolean 
默认值: true。默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 “application/x-www-form-urlencoded”。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。

使用FormData直接打包form表单的数据，无需单独获取

// 获取form
var _form = document.getElementById('form')
// 将form的数据进行打包
var _formData = new FormData(_form)
// 在进行数据提交的时候，直接将_formData进行提交

上传的流文件，通过js操控可以以blob的地址形式直接在前台预览，无需经由服务器，多个流文件同时展示的时候，可以采用数组的形式进行操控，方便删除与替换（应该形成多个input[type=file]）,有时间的话以后整理下