如何在 Javascript 中使用 FileList（来自 <input type="file">）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38580177/
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 work with FileList (from <input type="file">) in Javascript?
提问by dvtan
In this W3schools example, console.logon the input element reveals a FileInput object:
在这个 W3schools 示例中，console.log在 input 元素上显示了一个 FileInput 对象：
FileList {0: File, 1: File, length: 2}
How can I work with this? The example demonstrates accessing the file, but every time a user selects new files, the old files disappear. How can I create a new empty FileList and copy it over, so that a user can add more files to the FileList?
我该如何处理这个问题？该示例演示了对文件的访问，但每次用户选择新文件时，旧文件都会消失。如何创建一个新的空 FileList 并将其复制过来，以便用户可以向 FileList 添加更多文件？
I tried this, but it results in two FileList objects, rather than one FileList with all the files:
我试过了，但结果是两个 FileList 对象，而不是一个包含所有文件的 FileList：
var fileStore = x.files;
function myFunction(){
var txt = "";
if ('files' in x) {
if (x.files.length == 0) {
txt = "Select one or more files.";
} else {
fileStore += x.files;
console.log(x.files);
console.log(fileStore);
回答by Isaac
Untested, but this should work
未经测试，但这应该有效
var fileStore = [];
function myFunction(){
var txt = "";
if ('files' in x) {
if (x.files.length == 0) {
txt = "Select one or more files.";
} else {
fileStore.push.apply(fileStore,x.files);
console.log(x.files);
console.log(fileStore);
回答by guest271314
It is not possible to add Fileobjects to FileList. You can use FormDatato append Filesto a single object.
无法向 中添加File对象FileList。您可以使用FormData附加Files到单个对象。
var data = new FormData();
document.querySelector("input[type=file]")
.addEventListener("change", function(event) {
for (var i = 0, files = event.target.files; i < files.length; i++) {
data.append("file-" + [...data.keys()].length, files[i], files[i].name)
}
})
回答by james_womack
An array is fine for holding onto the Fileinstances, but FormDatais better if you want to upload them somewhere. If you want to log out or view the FormData, turning it into a Mapis an option. Keep in mind that FormDatais iterable.
数组可以很好地保存File实例，但FormData如果您想将它们上传到某个地方，则更好。如果您想注销或查看 FormData，将其转换为 aMap是一个选项。请记住，这FormData是可迭代的。
var formData = new FormData();
var index = 0;
function onDrop(event)
{
var dt = event.dataTransfer;
var files = dt.files;
var count = files.length;
output("File Count: " + count + "\n");
for (var i = 0; i < files.length; i++) {
formData.append(files[i].name, files[i]);
}
}
function output(text)
{
document.getElementById("output").textContent += text;
console.dir(new Map(formData));
}
