4

ファイル入力から画像の ajax プレビューを表示しようとしています。FileReader() を使用すると簡単ですが、ループで使用しているため、結果を画像ソース内に配置するときは、$(this) を使用して入力のループ項目をターゲットにする必要があります。それは私には意味がありません。

ループがあります..

<li>
  <input type="file" class="image" />
  <img src="" class="preview" />
</li>
<li>
  <input type="file" class="image" />
  <img src="" class="preview" />
</li>
<li>
  <input type="file" class="image" />
  <img src="" class="preview" />
</li>

ここで、2 番目の入力が選択されたとしましょう。FileReader からの結果をイメージ src に追加する必要があります。2 番目のループ アイテムとそのコンテンツをターゲットにして何かを実行するにはどうすればよいですか?

 function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
               // Here I need to use $(this) to target only the second list item's img.preview
               $('.preview').attr('src', e.target.result);
            };

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

2 に答える 2

10

これまでこの API を使用したことはありませんでした。興味深いもの。

このバージョンは、すべてのファイル入力をループし、プレビュー イメージを読み込みます。この関数は、ボタンのクリックによってトリガーされます。

$(function(){
    $("#btnLoadPreviews").click(loadPreviews_click);
})

function loadPreviews_click(e) {
    $(".image").each(function() {
        var $input = $(this);
        var inputFiles = this.files;
        if(inputFiles == undefined || inputFiles.length == 0) return;
        var inputFile = inputFiles[0];

        var reader = new FileReader();
        reader.onload = function(event) {
            $input.next().attr("src", event.target.result);
        };
        reader.onerror = function(event) {
            alert("I AM ERROR: " + event.target.error.code);
        };
        reader.readAsDataURL(inputFile);
    });
}

プレビュー画像を選択時にロードしたい場合は、代わりにこのバージョンを使用できます。

$(function(){
    $(".image").change(showPreviewImage_click);
})

function showPreviewImage_click(e) {
    var $input = $(this);
    var inputFiles = this.files;
    if(inputFiles == undefined || inputFiles.length == 0) return;
    var inputFile = inputFiles[0];

    var reader = new FileReader();
    reader.onload = function(event) {
        $input.next().attr("src", event.target.result);
    };
    reader.onerror = function(event) {
        alert("I AM ERROR: " + event.target.error.code);
    };
    reader.readAsDataURL(inputFile);
}
于 2012-11-26T01:00:57.497 に答える
1

これは私がそれを行う方法です。ターゲットをリーダー オブジェクト自体に割り当て、後で使用します。

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        // set where you want to attach the preview
        reader.target_elem = $(input).parent().find('preview');
        reader.onload = function (e) {
           // Attach the preview
           $(reader.target_elem).attr('src', e.target.result);
        };

        reader.readAsDataURL(input.files[0]);
    }
 }
于 2014-01-15T08:08:55.693 に答える