Question

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

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

要访问所选图像文件的名称，请使用

var fname = $("#imageupload")[0].files[0].name;

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

类似地，对于多个文件上传字段

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

我们（循环使用）

var file_name = $("#imageupload")[0].files[i].name;

任何人都可以清除我关于以下内容的概念：

$("#imageupload")[0]
files[0]
files[i]

Answer 1

$（“＃imageupload”）[0]

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

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

这是演示：https://codesandbox.io/s/kx5q2x24xv

文件[0]和文件[i]

此处的files被称为FileList对象，并且：

此类型的对象由HTML的files属性返回元件;这使您可以访问使用以下选项选择的文件列表 <input type="file">元素。

换句话说：

所有元素节点上都有一个文件数组，访问此列表中的项目。

我们在索引中使用方括号，以便访问该数组的特定元素。

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

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

有关更多信息：FileList

访问JavaScript中的输入文件上传字段

1 个答案: