多个input.files上的jQuery循环

时间:2013-04-04 20:47:32

标签: javascript jquery

我需要在多个文件输入上循环它:

    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,它在位置上工作。 R.G. input.files [2] ......

有什么想法吗?

1 个答案:

答案 0 :(得分:8)

执行此操作时:$("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);

}