アップロードする前にdiv内の画像を表示するには？

Question

私は5つの別々のファイルを持っています。アップロードした画像をdiv内に表示したいのです。例えば、最初の入力ファイルが画像をアップロードするとdiv内に表示されます。

問題問題は、最初の入力ファイル内に画像が挿入されているということです。たとえば、他の入力のいずれかをクリックしても画像がアップロードされます2番目の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

あなたがHTMLに設定するIDを使用しています。 $（ '＃結果を'）HTML（ ''）

あなたはidとクラスの間にどのような違いを知っていますか？

idは固有の識別子です。ですから、特定のidを持つページには1つの要素しか持たないようにしてください。それぞれのdivに同じIDを与えました。選択したdivにhtmlを挿入しようとすると、最初のdivに挿入されます。

あなたは

一つの方法は、あなたが挿入したい要素のidを渡すことが考えられます..あなたはにHTMLを挿入し、各div要素の一意の識別子をさせていただきたいと思いDIVを指定する方法が必要ですhtmlをあなたのメソッドのパラメータとして追加します。

あなたの入力onchangeイベントから "this"をreadUrlメソッドに渡しますが、決して使用しません。メソッドでパラメータを使用する方法について学ぶ必要があります。あなたはまた、別の方法として、あなたが通過した入力に「この」を使用することができます... ...二回

<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>  

をあなたはこのような何かを行うことができ

Anwaysをご入力のファイルタイプを設定しているが、使用していない場合は、DOMをトラバースして更新したいdivを探します。