使用$（this）和FileReader（）來定位結果

我試圖從文件輸入中顯示圖像的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>

所以，現在讓我們說第二個輸入choosen，現在我需要添加的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]); 
     } 
}

來源

2012-11-25 Pollux Khafra

不知道我得到它，但你不會連功能保留範圍，從而在'this'關鍵字就等於某個元素，或者您只是希望它會？ – adeneo

我真的不知道。我只是發現這個方法用於多個tuts以獲得文件輸入的預覽。我會帶着希望去。 –

我以前從未使用過此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-26 01:00:57

是不是可以在文件輸入中使用更改函數，然後運行我在其中提供的函數，以便我可以使用$ this來輸入並使用它來執行其他操作？ –

@PolluxKhafra - 當然是。你提到你在循環輸入，所以我也試圖做到這一點。我的第一個版本實際上是使用change事件編寫的。 –

循環是可以編輯的帖子的wordpress循環。所以我只需要定位一個在列表項中使用的輸入。我爲ex ex離開了ex循環。我試圖在函數中使用更改函數，但它不起作用。你能舉一個例子嗎？ –

這就是我該怎麼做的。將目標指定給閱讀器對象本身並稍後使用它。

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-15 08:08:55 Sarang

使用$（this）和FileReader（）來定位結果

回答

相關問題