我有<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>
祝你好运!