1

ここでの助けのおかげで、選択した画像をプレビューしてアップロードする方法があります：

<input type='file' name="files[]" onchange="readURL(this);" multiple />
<div id="previews"></div>

<script>
    function readURL(input) {
        if (input.files && input.files[0]) {

            var reader = new FileReader();

            reader.onload = function (e) {
                var container = $('#previews');
                var image = $('<img>').attr('src', e.target.result).width(150);
                image.appendTo(container);
            };
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>

入力で選択された各ファイルに対してこの関数をループする方法を知りたいですか? .each() のようなものを使用する場所がわかりません

編集：

これを試しています..しかし、2つのプレビューが表示されますが、両方とも同じ画像が表示されるため、どこか間違っていますか?

function readURL(input) {
    $.each(input.files,function(i) {
        var reader = new FileReader();
        reader.onload = function (e) {
            var container = $('#previews');
            var image = $('<img>').attr('src', e.target.result).width(150);
            image.appendTo(container);
        };
        reader.readAsDataURL(input.files[0]);
    });
}
4

2 に答える 2

2

input.filesはFileList、配列のように機能します。他のアレイと同じように
使用できます。jQuery.each

于 2013-02-09T21:31:10.133 に答える
0

ファイルが選択されている最後の行をループするだけです。

function readURL(input) {
    var reader = new FileReader();
    reader.onload = function (e) {
        var container = $('#previews');
        var image = $('<img>').attr('src', e.target.result).width(150);
        image.appendTo(container);
    };

    $.each(input.files,function(i) {
        reader.readAsDataURL(input.files[i]);
    });
}
于 2013-02-09T22:26:35.043 に答える