使用 HTML5 处理多个文件答案

【问题标题】：Handling multiple files with HTML5使用 HTML5 处理多个文件
【发布时间】：2012-07-26 16:02:13
【问题描述】：

我觉得发布这个有点傻，因为从我一直在阅读的内容来看，这似乎很简单，但我不知道为什么我总是将 1 视为 files.length 的值。

<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.js" type="text/javascript"></script>
<script>
    $(document).ready(function() {
        var button = $('#button');
        button.click(function(){    
           var files = $('#files');
           alert(files.length);
        });
     });
</script>
</head>
<body>
  <form>
    <input type="file" id="files" multiple="" />
    <input type="button" id="button" value="Upload" />
  </form>
</body>
</html>

【问题讨论】：

标签： javascript html fileapi filelist

【解决方案1】：

将警告行更改为：

alert(files[0].files.length);

这是可行的，因为您要做的是获取输入 DOM 元素的 files 属性，即 FileList 对象。然后，您需要 FileList 的 length attribute，它会告诉您选择了多少对象。您首先使用 jQuery 选择输入元素，但是像 $("#files") 这样的 jQuery 选择的结果是一个 jQuery 集合，您需要输入元素的底层 DOM 对象，因为只有它具有 files 属性。每个 jQuery 对象都伪装成一个数组，因此您可以使用标准数组解引用来获取底层 DOM 元素。（见：http://api.jquery.com/get/）

Try It!

【讨论】：