Question

我有以下表格和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);
});

请记住，一旦选择了文件，就应该立即获取文件名列表（及其扩展名），而不是在提交表单后。

修改

除了我在下面所说的内容之外，发生的另一件事是，当选择单个文件时，该文件的名称会显示在浏览按钮旁边，但是当选择多个文件时，它不会显示每个文件的名称，它只是说＆＃34;＃文件被选中。＆＃34;对于firefox和＆＃34; #file＆＃34;用于镀铬。我去看看IE做了什么，那个是不同的。它将文件或文件的路径放在浏览按钮旁边的文本字段中，所以我猜这是其他问题和答案的全部内容。我尝试了所有这些并且都没有工作，即使其中一个做了，这似乎只是一个Internet Explorer。我需要一个跨浏览器解决方案。

var fileName = $(this).val().split('\\').pop();

var fileName = $(this).val().split(',').pop();

var fileName = $(this).val().split(', ').pop();

因此，回顾一下，在选择多个文件时，应输出/显示每个文件的名称。即使其他解决方案适用于删除文件路径并只保留文件名和扩展名（仅适用于IE），它也无法显示所选文件的名称。它只显示第一个文件。

EDIT2：

万一你想知道，我也试过了，但这是不行，但似乎这里发布的答案确实有效，所以这很好。

var fileName = document.getElementById("myfiles").files;

Answer 1

您可以使用文件files元素的input属性来获取所选文件的列表。此属性包含一个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。

如何获取即将上传的多个文件的名称？

1 个答案: