javascript 获取使用输入类型文件（多个）选择的文件并将它们存储在一个数组中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17400191/
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
Get the files chosen using the input type file (multiple) and store them in an array
提问by insanity
In my HTML i select multiple files.
在我的 HTML 中，我选择了多个文件。
<input type="file" id="img" multiple>
I want to store each element in an array so that i can print the file source.
我想将每个元素存储在一个数组中，以便我可以打印文件源。
I have done this in my javascript but it does not work.
我已经在我的 javascript 中完成了这个，但它不起作用。
function loadfiles()
{
var x=document.getElementById("img");
for (var i=0;i<x.length;i++)
{
document.write(x.elements[i].src);
}
}
回答by Gautam Chadha
The property filesgets you an array of all the files selected by the file input. So the loadfiles function should be modified to following:
该属性为files您提供由文件输入选择的所有文件的数组。所以 loadfiles 函数应该修改为：
function loadfiles()
{
var imageFiles = document.getElementById("img"),
filesLength = imageFiles.files.length;
for (var i = 0; i < filesLength; i++) {
document.write(imageFiles.files[i].name);
}
}
回答by Raj Nathani
DOM documentation (Mozilla):
DOM 文档（Mozilla）：
element = document.getElementById(id);where
elementis a reference to an Element object, or null if an element with the specified ID is not in the document.idis a case-sensitive string representing the unique ID of the element being sought.
element = document.getElementById(id);在哪里
element是对 Element 对象的引用，如果具有指定 ID 的元素不在文档中，则为 null。id是一个区分大小写的字符串，表示要查找的元素的唯一 ID。
In your code document.getElementById(id)returns a single element and not a list.
To access the files added to the input take a look at the HTML5 Files API.
在您的代码中document.getElementById(id)返回单个元素而不是列表。
要访问添加到输入的文件，请查看 HTML5 文件 API。
var f = (document.getElementById('img').files);
for (var i =0; i < f.length; i++){
var new_div = document.createElement('div');
new_div.innerHTML = f[i].name;
document.body.appendChild(new_div);
}
FYI: Using document.write()is extremely dangerous, and should be avoided. For more read this stackoverflow Q&A: Why is document.write considered a "bad practice"?
仅供参考：使用document.write()极其危险，应避免使用。如需更多阅读此 stackoverflow 问答：为什么 document.write 被认为是“不好的做法”？
In the example above I substituted document.writewith document.body.appendChild
在上面的例子中，我document.write用document.body.appendChild
Fiddle (with jQuery): http://jsfiddle.net/4Yq4F/
小提琴（使用 jQuery）：http: //jsfiddle.net/4Yq4F/
Getting the complete file path
获取完整的文件路径
This is in your response requesting for the complete file path of the files. Unfortunately due to security reasons this is notpossible as of now. Mozilla Firefox browsers however will provide you with the complete file path with the mozFullPathattribute. If you want to use it, in the above example substitute f[i].namewith f[i].mozFullPath
这是在您请求文件的完整文件路径的响应中。不幸的是，由于安全原因，这是不是可能以现在。但是，Mozilla Firefox 浏览器会为您提供带有该mozFullPath属性的完整文件路径。如果你想使用它，在上面的例子中替换f[i].name为f[i].mozFullPath
回答by mohkhan
This should work for you...
这应该对你有用...
function loadfiles()
{
var x=document.getElementsByTagName("input");
for (var i=0;i<x.length;i++)
{
if(x[i].type == "file"){
document.write(x[i].value);
}
}
}
回答by mohkhan
this code will be work for you.
这段代码对你有用。
HTML
HTML
<input type="text" id="text"/>
<input type="button" value="add" id="adda"/>
JavaScript
JavaScript
var arry=[];
$("#adda").click(function(){
arry.push( $("#text").val());
alert(arry);
});
回答by Umar Memon
var fileArray = new Array();
$('#inputPostFile').change(function() {
var files = this.files;
$('.uploadedFileList').html('');
$.each(files, function (index, value) {
fileArray.push(value);
});
});
