在JavaScript中访问输入文件上载字段

我有一个单一图像文件的输入文件上载字段：

<input type="file" id="imageupload" />

我不知道为什么在$imageupload之后使用[0]

对于多个文件上载字段也类似

<input type="file" id="imageupload" multiple />

有谁能澄清我关于以下方面的概念：

$imageupload[0] 文件[0] 档案[i] $imageupload[0]

基本上，我们不需要使用括号，因为在理想情况下，当使用ID选择器时，应该只有一个元素与给定的ID匹配。我们在这里使用它只是为了确保不会发生错误。如果您的网站中只有一个元素具有该ID，您可以删除该[0]。如下所示：

var fname = $("#imageupload").prop('files')[0].name;
// or
var fname = document.getElementById('fileItem').files[0].name //without jQuery

这是演示：

文件[0]和文件[i]

此处的文件称为文件列表对象，并且：

此类型的对象由HTML的files属性返回 要素这使您可以访问使用选定文件的列表 元素

换言之：

所有元素节点上都有一个允许 访问此列表中的项目

我们使用括号和索引来访问该数组的特定元素

此示例使用输入元素迭代用户选择的所有文件：

// fileInput is an HTML input element: <input type="file" id="myfileinput" multiple>
var fileInput = document.getElementById("myfileinput");

// files is a FileList object (similar to NodeList)
var files = fileInput.files;
var file;

// loop through files
for (var i = 0; i < files.length; i++) {

    // get item
    file = files.item(i);
    //or
    file = files[i];

    alert(file.name);
}

---

有关更多信息：

$imageupload要求jquery选择id为imageupload的所有元素。可能会找到零个或多个具有该id的元素。因此jquery返回一个数组。[0]表示找到的数组中的第一个元素。然后要求输入元素中的第一个文件[0]。如果是一个循环，即多个文件，则使用一个变量并在变量位置files[i]处请求文件，其中i是变量。每当您在JavaScript和大多数其他语言（但不是所有语言）中看到方括号时，这意味着您正在从数组访问元素。@nguyen我们必须在$imageupload[0]中使用[0]，否则我会得到TypeError:$..文件未定义对不起，我已更新了我的答案。我们必须以jQuery方式访问文件列表。但您已经使用另一种方式$imageupload.prop'files'[0].name；完成了此操作；。我仍然无法得到确切的答案-为什么要在id选择器之后使用[0]。如果是数组，那么当jquery返回文件数组时，如果我有另一个具有相同id的文件上载字段，为什么[1]不起作用？

var fname = $("#imageupload").prop('files')[0].name;
// or
var fname = document.getElementById('fileItem').files[0].name //without jQuery

// fileInput is an HTML input element: <input type="file" id="myfileinput" multiple>
var fileInput = document.getElementById("myfileinput");

// files is a FileList object (similar to NodeList)
var files = fileInput.files;
var file;

// loop through files
for (var i = 0; i < files.length; i++) {

    // get item
    file = files.item(i);
    //or
    file = files[i];

    alert(file.name);
}