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

JQuery - get all fileNames inside input='file'

本文关键字：文件名 file 获取 JQuery input      更新时间：2023-09-26

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

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

我该怎么做？谢谢。

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

files将是文件列表对象。

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

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

文件接口参考
文件属性参考

jsFiddle Demo

您仍然可以将文件作为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
    }
});

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

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

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

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

<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>

祝你好运！

相关文章：