FormData h5实现多图上传的方式--FormData_综合

FormData 是 XMLHttpRequest Level 2 新增的一个对象，利用它来提交表单、模拟表单提交，当然最大的优势就是可以上传二进制文件!
有了这个对象，对图片的添加，删除，上传问题迎刃而解！！！

一、创建FormData对象

1.直接创建

var formData = new FormData();

2.通过现有的表单form创建new FormData(_form)

<body><form id="form"  action="" method="post"><input type="text" name="username" value="hahaha"></form><script>var _form = document.getElementById('form');var formData = new FormData(_form);var name = formData.get("username"); //hahahavar name = formData.getAll("username"); //["hahaha"]</script>
</body>

二、FormData的方法

获取值 – get和getAll

formData.get("username"); //获取到的是一个值
formData.getAll("username"); 获取到的是数组

添加值 – append和set

append和set的差别
append添加一个name的value值后，再添加则添加到数据的末尾。
而set再添加会修改此name的value值
formData.append(name, value,[ filename]);

name
- value中包含的数据对应的表单名称name。
value
- 表单的值。可以是USVString 或 Blob (包括子类型，如 File)。
filename 可选
- 传给服务器的文件名称 (一个 USVString), 当一个 Blob 或 File 被作为第二个参数的时候， Blob 对象的默认文件名是 “blob”。 File 对象的默认文件名是该文件的名称。

var formData = new FormData();
formData.append('upload_file', file);
formData.set('upload_file', file);

append同一个值多次时，可以用getAll来获取添加的所有数据组成的数组
例子,可直接复制，浏览：

<input type="file" id="imgfile" name="pic" multiple>
<script>$("#imgfile").change(function () {
    var data = new FormData();$.each($('#imgfile')[0].files, function (i, file) {
    console.log(file);data.append('upload_file', file);// data.set('upload_file', file);});console.log(data.get('upload_file'));console.log(data.getAll('upload_file'));});
</script>

修改值 – set

formData.set(name, value,[ filename]);
set既是添加值，也是修改值，没有此name的时候是添加，有此name的时候是修改

判断是否存在 – has

formData.has(name);

删除值 – delete

formData.delete(name);

三、多图上传的方法

将formData对象传给后台

//processData: false, contentType: false,多用来处理异步上传二进制文件。
$.ajax({
    url: 'xxx',type: 'POST',data: formData,                    // 上传formdata封装的数据dataType: 'JSON',cache: false,                      // 不缓存processData: false,                // jQuery不要去处理发送的数据contentType: false,                // jQuery不要去设置Content-Type请求头success:function (data) {
               //成功回调console.log(data);}
});

添加formData文件的方式
1.multiple file添加图片

<input type="file" id="imgfile" name="pic" multiple>$("#imgfile").change(function () {
    var formData = new FormData();$.each($('#imgfile')[0].files, function (i, file) {
    console.log(file);// formData.append('upload_file', file);formData.set('upload_file'+ i, file);});
});

2.单独添加

<body><input type="file"  id="imgfile1" ><input type="file"  id="imgfile2" ><input type="file"  id="imgfile3" ><button id="upload">多图上传按钮</button><script>document.getElementById('upload').onclick = function(){
    var formData = new FormData();var file1 = document.getElementById('imgfile1').files[0];var file2 = document.getElementById('imgfile2').files[0];var file3 = document.getElementById('imgfile3').files[0];formData.append('upload_file1',file1);formData.append('upload_file2',file2);formData.append('upload_file3',file3);console.log(formData.get('upload_file1'))}</script>
</body>

具体的添加方式，还是看页面展示需求，以及后台怎么能获取到的方式！