jquery - 将 $(this) 与 FileReader() 一起使用来定位结果

Question

我正在尝试显示文件输入中图像的 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>

现在假设选择了第二个输入，现在我需要将 FileReader 的结果添加到其图像 src 中。我如何定位第二个循环项目及其内容来执行操作？

 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]);
        }
 }

Answer 1

我以前从未使用过这个 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);
}