本文主要是介绍FormData上传多个文件 可选择多个文件 也可选择完删除部分 再上传，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
文章借鉴一位前辈的文章：http://www.cnblogs.com/imwtr/p/5924042.html
FormData上传多文件
- FormData的基本用法
- 遍历FormData的常用方法
- FormData上传多文件存在的问题
FormData的基本用法
通常呢 我们创建Formdata对象有两种
官方文档是这么说的：
1.你可以自己创建一个FormData对象，然后调用它的append()方法来添加字段，像这样：
var formData = new FormData();formData.append("username", "Groucho");
formData.append("accountnum", 123456); //数字123456会被立即转换成字符串 "123456"2.通过HTML表单元素创建FormData对象；
var formData = new FormData(someFormElement);
//someFormElement 为form表单元素
这个传递给后台的键值对 键就是每个input的name值 值就是每个input的value值
我们会发现 FormData对象是打印不出来的 这个时候我们想看 这个对象里都存了什么数据 该怎么办呢 可以参考文档里的
方法 遍历打印出来
遍历FormData的常用方法
1.entries() 方法
FormData.entries() 方法返回一个 iterator对象 ，此对象可以遍历访问FormData中的键值对。其中键值对的key是一个 USVString 对象；value是一个 USVString , 或者 Blob对象。
示例：
// Create a test FormData object
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');// Display the key/value pairs
for(var pair of formData.entries()) {console.log(pair[0]+ ', '+ pair[1]);
}详情可以看官方的api，传送门：https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/entries
2.keys();
3.values();
这些方法官方都有详细介绍 就不复制了
FormData上传多文件存在的问题
FormData上传多文件 ,我们应该都见过那种 上传多个文件 选择完了 之后 有可能点错了 或者不想继续上传了 可以删除 再选择。这个时候就会存在表面上我们可以把div移除 但是FormData仍然会把所有的都上传了 导致你删除的没有删掉。
查了查官网 有一个delete方法 删除指定 key 和它对应的 value(s)。 可是多文件的话 就不能用这个了 怎么办呢？
因为files是不允许被修改的
我们可以新建一个空数组 把files赋给这个空数据 对这个空数组进行 添加删除 然后 把这个数组append到formdata 然后 提交到后台
这里还需要注意一点 ，提交的时候 按钮需要type=”button” 否则有的情况会直接以submit形式提交了
这里我写了一个demo，代码如下：
点击已选择的框框 可以删除
html文件：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>*{margin:0;padding:0;}ul{list-style:none;}ul{width:700px;border:2px solid red;padding:10px;}.clearfix:after{display: block;content:'';overflow: hidden;visibility: hidden;clear: both;height:0;}.content ul li{float:left;width:100px;height:100px;margin:0 10px;border:1px solid #ccc;}.addFile{background:url("../img/icon12.png") no-repeat;background-position: center center;}#attach{width:100%;height:100%;opacity:0;}</style>
</head><body><form action="formData_test.php" id="form"><div class="content"><ul class="clearfix ul-box"><li class="addFile"><input type="file" id="attach" multiple require /></li></ul></div><input type="text" name="name"/><input type="text" name="age"/><input type="text" name="sex"/><input type="button" value="上传" class="subBtn"/></form>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>//定义一个数组 把文件数组的值给新数组 对新数组进行操作 然后把新数组传递给后台var curFiles = [];$("#attach").change(function(){var fileArr = $(this)[0].files;Array.prototype.push.apply(curFiles, fileArr);
// var fileArr = this.files;console.log(fileArr);//这里展示的话 还是用fileArrfor(var i=0;i<fileArr.length;i++){console.log(fileArr[i]);var item = fileArr[i];var abc=$("<li class='showf'><p style='overflow:hidden;text-overflow:ellipsis; '>文件名:"+item.name+"</p>"+"<p>大小："+(item.size/1024).toFixed(2)+"KB</p></li>");$(".ul-box").prepend(abc);}
// fileArr.map(function(item,index,arr){
// var abc=$("<li><p>文件名:"+item.name+"</p>"+
// "<p>大小："+parseInt(item.size/1024)+"KB</p></li>");
// $(".ul-box").prepend(abc);
// })})
$(".ul-box").on("click",".showf",function(){var index = $(".showf").index($(this));alert(index);var name = $(this).find("p").eq(0).html();console.log(curFiles);
// curFiles = curFiles.filter(function(file) {
// return file.name != name;
// });curFiles.splice(index,1)console.log(curFiles);$(this).remove();
})
$(".subBtn").click(function(){// 构建FormData对象var fd = new FormData($('#form')[0]);for (var i = 0, j = curFiles.length; i < j; ++i) {fd.append('attach[]', curFiles[i]);}for(var pair of fd.entries()) {console.log(pair[0]+ ', '+ pair[1]); }$.ajax({url: 'formData_test.php',type: 'post',data: fd,processData: false,contentType: false,success: function(rs) {console.log(rs);},error: function(err) {}});
})
</script></html>formData_test.php php文件：
<?php
$files = $_FILES['attach'];
var_dump($files);?>要把文件放到服务器环境下如appache 才能看到php打印的信息。
这篇关于FormData上传多个文件 可选择多个文件 也可选择完删除部分 再上传的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
