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

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

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

当我有一个“单个”文件输入字段，工作正常，但现在它是“多个”，它不喜欢它

---

有什么建议吗？

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

嗯，元素返回的值或

val（）

，似乎只是最后选择的文件名。为了解决这个问题，明智的做法是使用多个更改事件的性质：

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

---

经过编辑使上述内容稍微有用，希望更具示范性：

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

$（'input:file[multiple]'）。更改(
职能（e）{
console.log（e.currentTarget.files）；
var numFiles=e.currentTarget.files.length；
对于（i=0；i优秀代码，但每次更改对象都需要为空：

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

$（'input:file[multiple]'）。更改(
职能（e）{
$（“#输出”）.empty（）；
console.log（e.currentTarget.files）；
var numFiles=e.currentTarget.files.length；
对于（i=0；iThanks David，我使用了它，但仍然无法生成所有文件，很奇怪。我实际上刚刚读了一篇关于HTML5的文章（）如果应用的话，这对我来说会更好。毫无疑问，你的代码实际上帮助了我解决了我在其他地方遇到的另一个问题，所以，谢谢……真的吗？它在Chromium中一直工作，尽管这不能保证其他浏览器的行为。无论如何，我很高兴（有些）帮助，如果我有机会，我将尝试进一步研究。感谢David，非常感谢您解释至少在v24（可能更早）版本中文件属性（文件大小现在是大小，文件名现在是名称）的Chrome/Chrome更改。我可以看出上面提到的潜在问题，当您使用fileuploader重新选择新文件时，列出的文件是否仍然构成提交元素？如何删除选定的文件？
$('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'));
            }
    });

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

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