Question

我正在使用HTML5精彩的“多重”文件选择功能。

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

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

如果我运行一个测试JS函数，它'警告'我输入字段的值，它只显示一个文件而不管我选择10。

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

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

有什么建议吗？

Answer 1

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

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

JS Fiddle demo

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

要访问文件名（以及上次修改日期，文件大小...），您可以（在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（可能来自之前的版本）的变化而更新，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

Answer 2

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

Answer 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'));
        }
});

谢谢David ......

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

3 个答案: