我有以下表单、div 和 jQuery。选择要上传的文件时,文件的名称(及其扩展名)将输出到 div,但是,它不适用于多个文件。选择多个文件时,只输出第一个文件的名称。我找遍了多个文件的解决方案,但找不到。
<form id="myform" action="" method="post" enctype="multipart/form-data">
<input type="file" multiple name="files[]" />
<input type="submit" name="submit" value="Submit">
</form>
<div class="filename"></div>
$("input:file").change(function (){
var fileName = $(this).val();
$(".filename").html(fileName);
});
所以请记住,应该在选择文件后立即获取文件名列表(及其扩展名),而不是在提交表单之后。
编辑:
除了我在下面所说的之外,发生的另一件事是当选择单个文件时,该文件的名称显示在浏览按钮旁边,但是当选择多个文件时,它不显示每个文件的名称,它只是说“# files selected”。对于 Firefox 和“# files”对于 chrome。我去看看 IE 做了什么,那个是不同的。它将一个或多个文件的路径放在浏览按钮旁边的文本字段中,所以我想这就是另一个问题和答案的全部内容。我尝试了所有这些,但都没有用,即使其中一个成功了,那似乎也只是 Internet Explorer 的事情。我需要一个跨浏览器解决方案。
var fileName = $(this).val().split('\\').pop();
var fileName = $(this).val().split(',').pop();
var fileName = $(this).val().split(', ').pop();
所以回顾一下,当选择多个文件时,应该输出/显示每个文件的名称。即使其他解决方案适用于删除文件路径并仅保留文件名和扩展名(仅适用于 IE),它也不适用于显示每个选定文件的名称。它只显示第一个文件。
编辑 2:
以防万一你想知道,我也试过这个,但这是不行的,但看起来这里发布的答案确实有效,所以这很好。
var fileName = document.getElementById("myfiles").files;
最佳答案
您可以使用文件 input
元素的 files
属性来获取所选文件的列表。此属性包含 FileList
可以像这样使用的对象:
$("input:file").change(function () {
var filenames = '';
for (var i = 0; i < this.files.length; i++) {
filenames += '<li>' + this.files[i].name + '</li>';
}
$(".filename").html('<ul>' + filenames + '</ul>');
});
参见 demo .
如果您只想要一个由空格或逗号分隔的文件列表:
$("input:file").change(function () {
var filenames = $.map(this.files, function (file) {
return file.name;
});
$(".filename").html(filenames.join(', '));
});
参见 demo .
关于javascript - 如何抓取即将上传的多个文件的名称?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26391297/