使用$（this）和FileReader（）来定位结果 [英] Using $(this) with FileReader() to target result

问题描述

我试图从文件输入中显示一个图像的ajax预览。使用FileReader（）足够简单，但我用它循环，所以当我把结果放在一个图像源的时候，我需要使用$（this）来定位输入的循环项目。这对我来说没有任何意义，所以我们现在就去。

我们有一个循环..

 <李> 
< input type =fileclass =image/> 
< img src =class =preview/> 
< / li> 
< li> 
< input type =fileclass =image/> 
< img src =class =preview/> 
< / li> 
< li> 
< input type =fileclass =image/> 
< img src =class =preview/> 
< / li> 
  

现在可以说第二个输入被选择了，现在我需要将FileReader的结果添加到它图片src。

 函数readURL（输入）{
如果我要定位第二个循环项目及其内容（input.files&& input.files [0]）{
 var reader = new FileReader（）; 
 reader.onload = function（e）{
 //这里我需要使用$（this）来定位第二个列表项目的img.preview 
 $（'。preview'）。 attr（'src'，e.target.result）; 
}; 
 
 reader.readAsDataURL（input.files [0]）; 
 
 
 
 $ div $解析方案

之前从未使用过这个API。有趣的东西。



此版本循环显示所有文件输入并加载预览图像。该功能是由一个按钮点击触发。

  $（function（）{
 $（＃btnLoadPreviews） .click（loadPreviews_click）; 
}）
 
 function loadPreviews_click（e）{
 $（。image）。each（function（）{
 var $输入= $（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）; 
}）; 
 
 
 
 $ b $ p 
 $ b 
如果您希望在选择预览图像时加载，您可以使用这个版本。  
 
 
  $（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）; 
} 
  
 
I'm trying to show an ajax preview of an image from a file input. Easy enough using FileReader() but I'm using it with a loop so I when it's time to place the result inside an image source, I need to use $(this) to target the loop item of the input. That doesn't even make sense to me so here we go.


We have a loop..
<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>
So now lets say the second input is choosen and now I need to add the result from FileReader to it's image src. How am I targeting the second loop item and its content to do stuff?
 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]);
        }
 }

解决方案
I had never worked with this API before. Interesting stuff. 

This version loops through all the file inputs and loads their preview images. The function is triggered by a button click.
$(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);
    });
}
If you prefer to have the preview image load as they are selected you could use this version instead. 
$(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);
}


                        
这篇关于使用$（this）和FileReader（）来定位结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！