7

我需要在多文件输入上循环这个：

    var reader = new FileReader();

    reader.onload = function (e) {
        $('#pprev_0')
        .attr('src', e.target.result);
    };

    reader.readAsDataURL(input.files[0]);

我试过这个，但它不起作用：

var fileCount = 0;
$("input[name='files[]']").each(function() {

    var reader = new FileReader();

    reader.onload = function (e) {
        $('#pprev_'+fileCount)
        .attr('src', e.target.result)
        .css("display","block");
    };

    reader.readAsDataURL(input.files[fileCount]);

    fileCount++;
});

fileCount 输出上的 alert() 是多个文件选择的一次性 0。没有进一步的警报。如果我在代码中使用数字而不是 fileCount var，它会在位置上工作。rg input.files[2] ...

任何的想法？

4

1 回答 1

10

当你这样做时：$("input[name='files[]']").each(function() {你实际上得到了与选择器匹配的任何元素。在这种情况下，您将获得单个多文件输入（这就是为什么您只看到 1 个警报的原因。您想要做的是遍历文件。

这个页面的代码几乎完全符合您的要求。我建议你检查一下：

http://www.html5rocks.com/en/tutorials/file/dndfiles/

要将其应用于您的情况，您可以执行以下操作：

var files = $('#files')[0].files; //where files would be the id of your multi file input
//or use document.getElementById('files').files;

for (var i = 0, f; f = files[i]; i++) {

    var reader = new FileReader();

    reader.onload = function (e) {
        $('#pprev_'+fileCount)
        .attr('src', e.target.result)
        .css("display","block");
    };

    reader.readAsDataURL(f);

}
于 2013-04-04T21:30:55.293 回答