HTML5 / JS - 在 div 中显示多个文件输入答案

【问题标题】：HTML5 / JS - Display multiple file input in divHTML5 / JS - 在 div 中显示多个文件输入
【发布时间】：2011-10-10 22:11:07
【问题描述】：

我正在使用 HTML5 美妙的“多”文件选择功能。

<input type="file" id="fileInput" onChange="runTest()" multiple>

我想在输入字段下方显示选定的文件名并使用 CSS 使其看起来更漂亮，但是...

如果我运行一个测试 JS 函数，它会“提醒”我输入字段的值，无论我选择 10，它都只会显示一个文件。

function runTest() {
var fileInput = document.getElementById('fileInput').value;
alert("You selected: "+fileInput);
}

我这样做是因为我有一个“单个”文件输入字段并且工作正常，但现在它是“多个”，它不喜欢它。

有什么建议吗？

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

好吧，元素返回的值或val() 似乎只是最后一个选定文件的名称。要解决这个问题，使用多更改事件的性质可能是明智的：

$('input:file[multiple]').change(
    function(){
        $('ul').append($('<li />').text($(this).val()));
    });

JS Fiddle demo.

然后将名称输出到列表中（如示例中所示），或将最新值附加到数组中，或者可能使用/创建隐藏输入来存储您认为最适合您的应用程序的文件名。

要访问文件名（以及最后修改日期、文件大小...），您可以（在 Chromium 12/Ubuntu 11.04 中测试）使用以下命令：

$('input:file[multiple]').change(
    function(e){
        console.log(e.currentTarget.files);
    });

JS Fiddle demo.

已编辑以使上述内容更有用，并希望具有示范性：

$('input:file[multiple]').change(
    function(e){
        console.log(e.currentTarget.files);
        var numFiles = e.currentTarget.files.length;
            for (i=0;i<numFiles;i++){
                fileSize = parseInt(e.currentTarget.files[i].fileSize, 10)/1024;
                filesize = Math.round(fileSize);
                $('<li />').text(e.currentTarget.files[i].fileName).appendTo($('#output'));
                $('<span />').addClass('filesize').text('(' + filesize + 'kb)').appendTo($('#output li:last'));
            }
    });

JS Fiddle demo.

由于 Webkit、Chrome 24（尽管可能来自更早版本）的更改，最终代码块已更新，由 cmets 中的 nextgentech 更新，如下：

$('input:file[multiple]').change(
    function(e){
        console.log(e.currentTarget.files);
        var numFiles = e.currentTarget.files.length;
            for (i=0;i<numFiles;i++){
                fileSize = parseInt(e.currentTarget.files[i].size, 10)/1024;
                filesize = Math.round(fileSize);
                $('<li />').text(e.currentTarget.files[i].name).appendTo($('#output'));
                $('<span />').addClass('filesize').text('(' + filesize + 'kb)').appendTo($('#output li:last'));
            }
    });

JS Fiddle demo.

【讨论】：

感谢大卫，我使用了这个，但仍然无法让它生成所有文件，很奇怪。我实际上刚刚阅读了一篇关于 HTML5 (html5rocks.com/en/tutorials/file/dndfiles) 的文章，如果应用它，对我来说会好得多。毫无疑问，您的代码实际上帮助我解决了我在其他地方遇到的另一个问题，所以谢谢...
真的吗？它在 Chromium 中始终如一地工作，尽管这不能保证其他浏览器的行为。无论如何，我很高兴得到了（一些）帮助，如果有机会，我会尝试进一步研究。
谢谢大卫，非常感谢
Updated Fiddle 至少考虑 Chrome/Chromium 在文件属性中的更改（fileSize 现在是 size，fileName 现在是 name） v24（可能更早）。
我可以看到上面的一个潜在问题，当您使用文件上传器重新选择新文件时，列出的文件是否仍然是提交元素？

【解决方案2】：

在alert调用上设置一个断点，看看变量fileInput的内容，看看是否有另一个属性包含了所有的文件名。

【讨论】：

【解决方案3】：

优秀的代码，但每次更改对象都需要为空：

$('input:file[multiple]').change(
function(e){
    $('#output').empty();
    console.log(e.currentTarget.files);
    var numFiles = e.currentTarget.files.length;
        for (i=0;i<numFiles;i++){
            fileSize = parseInt(e.currentTarget.files[i].fileSize, 10)/1024;
            filesize = Math.round(fileSize);
            $('<li />').text(e.currentTarget.files[i].fileName).appendTo($('#output'));
            $('<span />').addClass('filesize').text('(' + filesize + 'kb)').appendTo($('#output li:last'));
        }
});

谢谢大卫...

【讨论】：

如何删除选中的文件？