Html 上传前如何在输入类型文件中附加多个文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22844349/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to append files in input type file with multiple before uploading
提问by Aisha
I select 2 images and again I select 3 images second time before upload, the first two gets removed from input type file and last 3 images are still there. I know it's the default behavior of input type file, that it replaces the new files with new selected ones, but I want to keep all the files user selects multiple times before upload. How is it possible? I am using ajax and formdata.
我选择了 2 张图像，然后在上传前第二次选择了 3 张图像，前两张从输入类型文件中删除，最后 3 张图像仍然存在。我知道这是输入类型文件的默认行为，它用新选择的文件替换新文件，但我想保留用户在上传前多次选择的所有文件。这怎么可能？我正在使用 ajax 和 formdata。
回答by Uday A. Navapara
I have face same problem like you
我和你一样面临同样的问题
now i have found solution for that
现在我找到了解决方案
<input type="file" id="attachfile" name="replyFiles" multiple> <!--File Element for multiple intput-->
<div id="#filelist"></div>
<script>
var selDiv = "";
var storedFiles = []; //store the object of the all files
document.addEventListener("DOMContentLoaded", init, false);
function init() {
//To add the change listener on over file element
document.querySelector('#attachfile').addEventListener('change', handleFileSelect, false);
//allocate division where you want to print file name
selDiv = document.querySelector("#filelist");
}
//function to handle the file select listenere
function handleFileSelect(e) {
//to check that even single file is selected or not
if(!e.target.files) return;
//for clear the value of the selDiv
selDiv.innerHTML = "";
//get the array of file object in files variable
var files = e.target.files;
var filesArr = Array.prototype.slice.call(files);
//print if any file is selected previosly
for(var i=0;i<storedFiles.length;i++)
{
selDiv.innerHTML += "<div class='filename'> <span> " + storedFiles[i].name + "</span></div>";
}
filesArr.forEach(function(f) {
//add new selected files into the array list
storedFiles.push(f);
//print new selected files into the given division
selDiv.innerHTML += "<div class='filename'> <span> " + f.name + "</span></div>";
});
//store the array of file in our element this is send to other page by form submit
$("input[name=replyfiles]").val(storedFiles);
}
</script>
this is working in my page properly i wish this is also be useful for you also
这在我的页面中正常工作，我希望这对您也有用
回答by Dmitry Shaposhnikov
The right way is to use
$("input[name=replyfiles]").clone().appendTo( $("input[name=replyfiles]").parent() ).val('');
$("input[name=replyfiles]").hide();except $("input[name=replyfiles]").val(storedFiles);.
正确的方法是使用
$("input[name=replyfiles]").clone().appendTo( $("input[name=replyfiles]").parent() ).val('');
$("input[name=replyfiles]").hide();except $("input[name=replyfiles]").val(storedFiles);。
