如何在上傳前在div中顯示圖像？

Question

我有一個五個分開的<input>文件，我想要任何上傳的圖像顯示在它自己的div內，因此例如第一個輸入文件，當我點擊上傳圖像時應該顯示在div內等等。

的問題是，我得到插入第一個輸入文件內的圖像，即使我點擊的其他投入之一，例如，我要上傳的第二圖像，因此圖像應該簡單地顯示裏面的第二個div，但我總是在第一個裏面。

HTML代碼：

<div class="col-md-4"> 
    <div class="row"> 
     <div class="form-group"> 
      <div class="f-image first" id="1" data-up="1"> 
       <span class="handle"></span> 
       <div class="image-upload"> 
        <label>Add An Image</label> 
        <input name="userfile[]" type="file" class="up-button" type="file" onchange="readURL(this);"> 
       </div> 
       <div id="result"> 
        <img id="img-inside-small" /> 
       </div> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="f-image small" id="2" data-up="2"> 
       <span class="handle"></span> 
       <div class="image-upload"> 
        <label class="small">Add An Image</label> 
        <input name="userfile[]" type="file" class="up-button" type="file" onchange="readURL(this);"> 
       </div> 
       <div id="result"> 
        <img id="img-inside-small" /> 
       </div> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="f-image small" id="3" data-up="3"> 
       <span class="handle"></span> 
       <div class="image-upload"> 
        <label class="small">Add An Image</label> 
        <input name="userfile[]" type="file" class="up-button" type="file" onchange="readURL(this);"> 
       </div> 
       <div id="result"> 
        <img id="img-inside-small" /> 
       </div> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="f-image small" id="4" data-up="4"> 
       <span class="handle"></span> 
       <div class="image-upload"> 
        <label class="small">Add An Image</label> 
        <input name="userfile[]" type="file" class="up-button" type="file" onchange="readURL(this);"> 
       </div> 
       <div id="result"> 
        <img id="img-inside-small" /> 
       </div> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="f-image small" id="5" data-up="5"> 
       <span class="handle"></span> 
       <div class="image-upload"> 
        <label class="small">Add An Image</label> 
        <input name="userfile[]" type="file" class="up-button" type="file" onchange="readURL(this);"> 
       </div> 
       <div id="result"> 
        <img id="img-inside-small" /> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

JS代碼：

function readURL(){ 
    $("input[type='file']").change(function(e) { 

     for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) { 

      var file = e.originalEvent.srcElement.files[i]; 

      var reader = new FileReader(); 
      reader.onloadend = function() { 
       // $('#img-inside-small').attr('src', reader.result); 
       $('#result').html('<img src="' +reader.result+ '" id="img-inside-small"/>'); 
      } 
      reader.readAsDataURL(file);  } 
    }); 
} 

請，有什麼建議？傢伙

UPDATE：

的<img id="img-inside-small" />內結果div你可以忽略它，我只是忘了刪除它，jquery應該做的工作。

Answer 1

您正在使用的ID設置HTML： $（ '＃結果'）HTML（ ''）

你知道什麼是ID和類之間的區別？

一個id是一個唯一的標識符。所以你應該只在頁面上有一個給定ID的元素。你已經給你的每個div有相同的ID。當你嘗試插入html到選定的div中時，它會插入到第一個div中。

您需要一種方法來指定的div你想html插入並給每個格的唯一標識符..

的一種方法是，你通過你想插入的元素的ID html作爲你的方法中的一個參數。

您將您的輸入onchange事件中的「this」傳遞給readUrl方法，但您從不使用它。您需要了解如何在方法中使用參數。您還設置您輸入兩次文件類型...

Anways你可以做這樣的事情...

<input type="file" onchange="readURL('div1');"> 
<div id="div1"></div> 
<input type="file" onchange="readURL('div2');"> 
<div id="div2"></div> 


<script> 
function readURL(divID){ 
$("input[type='file']").change(function(e) { 

    for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) { 

     var file = e.originalEvent.srcElement.files[i]; 

     var reader = new FileReader(); 
     reader.onloadend = function() { 
      // $('#img-inside-small').attr('src', reader.result); 
      $('#' + divID).html('<img src="' +reader.result+ '" id="img-inside-small"/>'); 
     } 
     reader.readAsDataURL(file);  } 
}); 
} 
</script>  

或者您可以使用「本」上輸入您穿過而沒有使用，遍歷DOM並找到你想要更新的div。