5

在我的 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);
}
}
4

5 回答 5

6

该属性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);
    }
}
于 2013-07-01T08:48:38.193 回答
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 问答：为什么 document.write 被认为是“不好的做法”？

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

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

获取完整的文件路径

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

于 2013-07-01T08:43:36.300 回答
1

这应该对你有用......

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);
         }
     }
}
于 2013-07-01T08:42:01.570 回答
0

此代码将为您工作。

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);
});
于 2013-07-01T09:05:01.713 回答
0 
var fileArray = new Array();
 $('#inputPostFile').change(function() {
                var files = this.files;
                   $('.uploadedFileList').html('');
                $.each(files, function (index, value) {
                    fileArray.push(value);
                });
            });
于 2015-09-04T12:02:16.910 回答