JQuery - 获取input='file'中的所有文件名
JQuery - get all fileNames inside input='file'
我有<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>
祝你好运!
相关文章:
- 正在将base64 jpeg从input-type=file上传到服务器
- TableExport jquery插件:文件名和扩展名问题
- 可以设置“;文件名"发生错误时显示的内联脚本标记的
- 通过javascript下载文件时设置文件名
- JS-使用Ajax获取文件名
- 根据HTML文件名授予web服务器写入权限
- AngularJS-如何列出给定文件夹中的文件名
- 有人能告诉我如何在cent-os中打开扩展名为.dat的FIle吗
- PHP 包括 Javascript 生成的文件名
- 在csv文件名中使用西班牙语字符
- File Upload事件上下文和javascript
- 试图在Photoshop JSX脚本中将画布大小导出为文件名
- 如何设置浏览器打开的文件对话框的文件名(一些默认值)
- 如何将动态文件名传递给ng-include
- Safari 5.1.7下载文件名未知的csv文件
- 如何在JavaScript中基于事件对象获取文件名
- 正在获取客户端计算机上特定目录中的文件名
- JQuery - 获取input='file'中的所有文件名
- 输入类型[file]不显示文件名.Angularjs
- 将变量文件名传递给grunt.file.read