获取使用输入类型文件（多个）选择的文件并将它们存储在数组中答案

【问题标题】：Get the files chosen using the input type file (multiple) and store them in an array获取使用输入类型文件（多个）选择的文件并将它们存储在数组中
【发布时间】：2013-07-01 08:30:02
【问题描述】：

在我的 HTML 中，我选择了多个文件。

<input type="file" id="img" multiple>

我想将每个元素存储在一个数组中，以便我可以打印文件源。

我已经在我的 javascript 中完成了此操作，但它不起作用。

function loadfiles()
{
var x=document.getElementById("img");
for (var i=0;i<x.length;i++)
{
  document.write(x.elements[i].src);
}
}

【问题讨论】：

ID 应该是唯一的。
那么问题是什么？
另外，页面加载后无法使用document.write。使用document.createElement、document.createTextNode 和Element#appendChild

标签： javascript dom input

【解决方案1】：

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);
    }
}

【讨论】：

.name 显示文件的名称。我想获取文件的源或路径。怎么办？
浏览器出于安全原因限制恢复文件路径。这在旧浏览器中可用，但现在支持 HTML5 的浏览器在路径名中发送一个 `C:\fakepath`。所以最好不要依赖所有主流浏览器都没有的东西。 @insanity

【解决方案2】：

DOM 文档 (Mozilla)：

element = document.getElementById(id);

在哪里

element 是对 Element 对象的引用，如果具有指定 ID 的元素不在文档中，则为 null。

id 是一个区分大小写的字符串，表示正在查找的元素的唯一 ID。

在您的代码中，document.getElementById(id) 返回单个元素而不是列表。
要访问添加到输入的文件，请查看 HTML5 Files 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);   
}

仅供参考：使用document.write() 非常危险，应该避免。有关更多信息，请阅读此 stackoverflow 问答：Why is document.write considered a "bad practice"?

在上面的示例中，我将document.write 替换为document.body.appendChild

小提琴（使用 jQuery）：http://jsfiddle.net/4Yq4F/

获取完整的文件路径

这是在您要求提供文件的完整文件路径的响应中。不幸的是，由于安全原因，目前不可能做到这一点。然而，Mozilla Firefox 浏览器将为您提供带有 mozFullPath 属性的完整文件路径。如果你想使用它，在上面的例子中将f[i].name替换为f[i].mozFullPath

【讨论】：

.name 显示文件的名称。我想获取文件的源或路径。怎么办？

【解决方案3】：

这应该适合你...

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);
         }
     }
}

【讨论】：

【解决方案4】：

这段代码对你有用。

HTML

<input type="text" id="text"/>
<input type="button" value="add" id="adda"/>

JavaScript

var arry=[];
$("#adda").click(function(){
   arry.push( $("#text").val());
    alert(arry);
});

【讨论】：

【解决方案5】：

var fileArray = new Array();
 $('#inputPostFile').change(function() {
                var files = this.files;
                   $('.uploadedFileList').html('');
                $.each(files, function (index, value) {
                    fileArray.push(value);
                });
            });

【讨论】：