javascript - JQuery - 获取 input='file' 中的所有文件名

Question

我有<input type="file" id="basicUploadFile" multiple="multiple">并且我想在这个输入中获取所有文件名。我见过一些例子，但它只得到第一个文件的名称。

$ ('#basicUploadFile').live ('change', function () {
    alert($ ('#basicUploadFile').val());
});

我怎样才能做到这一点？谢谢。

Answer 1

var files = $('#basicUploadFile').prop("files")

files将是一个 FileList 对象。

var names = $.map(files, function(val) { return val.name; });

现在names是一个字符串数组（文件名）

FileAPI 参考
文件属性参考

Answer 2

jsFiddle 演示

---

您仍然可以将文件作为FileList集合访问，而无需过度使用jQuery. 我创建了一个快速的jsFiddle，演示了如何使用FileList和File对象从输入中获取信息。这是一个片段：

$('#basicUploadFile').live('change', function ()
{
    for (var i = 0; i < this.files.length; i++)
    {
        alert(this.files[i].name);
        alert(this.files.item(i).name); // alternatively
    }
});

Answer 3

我用它在控制台中显示所有文件名：

var input_file = $("#input_file");
input_file.on("change", function () {
     var files = input_file.prop("files")
     var names = $.map(files, function (val) { return val.name; });
     $.each(names, function (i, name) {
          console.log(name);
     });
});

Answer 4

<input name="selectAttachment" id="selectAttachment" type="file" multiple="multiple">
<button class="btn btn-default" onclick="uploadAttachment()" type="submit">Upload</button>


function uploadAttachment() {
                debugger;
                var files = $('#selectAttachment').prop('files');
                var names = $.map(files, function (val) { return val.name; });
            }

Answer 5

您可以扩展File Object的原型（例如File.prototype.toJSON），并且可以访问 FileList 的<input ..>：

<input id="myFile" type="file">

 var file = document.getElementById('fileItem').files[0];

有关更多信息，请查看此文档：

https://developer.mozilla.org/en-US/docs/Web/API/FileList#Using_the_file_list

检查这个简单的例子：

File.prototype.toJSON = function() {
	return {
		'lastModified'     : this.lastModified,
		'lastModifiedDate' : this.lastModifiedDate,
		'name'             : this.name,
		'size'             : this.size,
		'type'             : this.type 
	};
}

function getFiles() {
    var files = document.getElementById('myFiles').files;
    document.getElementById('result').innerHTML = '<h1>result</h1>'
      + JSON.stringify(files);
}

<input id="myFiles" type="file" multiple onchange="getFiles()" />
<pre id='result'></pre>

祝你好运！