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() は、複数のファイルを選択すると 1 回 0 になります。それ以上のアラートはありません。コードで fileCount 変数の代わりに数字を使用すると、その位置で機能します。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 に答える