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"); //hahaha
var 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>
具体的添加方式，还是看页面展示需求，以及后台怎么能获取到的方式！