使用FileReader選擇並顯示圖像

Question

這是我的問題，我有這個小代碼來顯示img，我沒有重新加載LIVE上傳，但它只適用於一個img，因爲readURL(input)沒有類和直接從noname輸入，當我添加一個類readURL(input.joint)，它會降低錯誤！這裏是我的代碼：

<input class="joint" type='file' id="imgInp" /> 
    <img style="width:45px" id="blah" src="#" alt="your image" /> 


<script type="text/javascript"> 
function readURL(input) { 

    if (input.filers && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $('#blah').attr('src', e.target.result); 
     } 

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

$("#imgInp").change(function(){ 
    readURL(this); 
}); 
</script> 

我需要添加一些id或類到這個jquery函數，使其獨特的每個輸入。

我想要做的事：

<input class="joint" type='file' id="imgInp" /> 
     <img style="width:45px" id="blah" src="#" alt="your image" /> 


    <script type="text/javascript"> 
    function readURL(input.joint) { 

     if (input.joint.filers && input.joint.files[0]) { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
       $('#blah').attr('src', e.target.result); 
      } 

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

    $("#imgInp").change(function(){ 
     readURL(this); 
    }); 
    </script> 


<input class="file2" type='file' id="imgInp" /> 
     <img style="width:45px" id="blah" src="#" alt="your image" /> 


    <script type="text/javascript"> 
    function readURL(input.file2) { 

     if (input.file2.filers && input.file2.files[0]) { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
       $('#blah').attr('src', e.target.result); 
      } 

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

    $("#imgInp").change(function(){ 
     readURL(this); 
    }); 
    </script> 

Answer 1

您有重複的ID各地（imgInp和blah），所以選擇將只選擇第一個，最後你的事件僅結合第一個輸入字段以及$('#blah')的選擇。您需要選擇相對於輸入的相對圖像。您也不必重複該腳本。選擇下圖像標記相對於輸入像$(input).next('img').attr('src', e.target.result);

的那麼嘗試：

function readURL(input) { 

    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $(input).next('img').attr('src', e.target.result); 
     } 

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


$(function(){ 
    $(".upld").change(function() { //set up a common class 
     readURL(this); 
    }); 
}); 

Fiddle

Answer 2

您的代碼正常工作對我來說，當我解決這個錯字：

if (input.filers && input.files[0]) { 
      ^^^^^^ 
if (input.files && input.files[0]) { 

這裏是例子：http://jsfiddle.net/s6ttw/

更新：

如果喲你希望它能夠工作，你期望你需要使用類而不是ID。

這裏是你問什麼是更好的例子：http://jsfiddle.net/s6ttw/1/

Answer 3

好，您正在嘗試的事實類添加到與點函數參數符號說明您需要了解有關Javascript如何工作的詳細信息，可以在簡單的StackOverflow答案中解釋，但讓我試試：

• input in readURL(input)是一個參數名稱，類似於變量名稱，所以不能以任何方式擴展它。當您撥打readURL時，這是對您傳遞的任何內容的參考，在這種情況下，如果您查看代碼的結尾，則是對this的引用。 this引用您傳入的jQuery選擇器引用的元素："#imgInp"。

所以，如果你想使用.joint類代替，只是通過在一個jQuery選擇：

$(".joint").change(function(){ 
    readURL(this); 
}); 

• 但是，假設你有多個.joint元素，你readURL功能將無更長時間的正常工作，因爲它目前僅用於更改#blah的src。你需要做的是改變每個元素img的src。

所以，如果你有一些HTML這樣的：

<input class="joint" type='file' /> 
<img class="joint-img" style="width:45px" src="#" alt="your image" /> 

<input class="joint" type='file' /> 
<img class="joint-img" style="width:45px" src="#" alt="your image" /> 

<input class="joint" type='file' /> 
<img class="joint-img" style="width:45px" src="#" alt="your image" /> 

您可以將所有的元素後，請將您的readURL功能和改變reader.onload部分如下：

function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $(input).next('.joint-img').attr('src', e.target.result); 
     } 

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

$(".joint").change(function(){ 
    readURL(this); 
});