2つ以上の複数入力ファイルのプレビュー画像

Question

2つの画像フィールドがあり、フォームを送信する前にプレビューを表示したい。以下のフォームでは、複数の画像を表示することによって動作しますが、私は、各入力のように個別にその画像を表示したい：

入力1 入力1枚の画像

入力2枚の 入力2画像

私はどのように行うのですかこの？

<input id="fileupload" type="file" name="img_slide" multiple> 
        <div id="dvPreview"> 

<input id="fileupload2" type="file" name="img_capa" multiple> 
       <div id="dvPreview2"> 

<script> 
      window.onload = function() { 

      var fileUpload = document.getElementById("fileupload"); 

     fileUpload.onchange = function() { 
      if (typeof (FileReader) != "undefined") { 
     var dvPreview = document.getElementById("dvPreview"); 
     dvPreview.innerHTML = ""; 
     var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/; 
     for (var i = 0; i < fileUpload.files.length; i++) { 
      var file = fileUpload.files[i]; 
      if (regex.test(file.name.toLowerCase())) { 
       var reader = new FileReader(); 
       reader.onload = function (e) { 
        var img = document.createElement("IMG"); 

        img.height = "100"; 
        img.width = "100"; 
        img.src = e.target.result; 
        dvPreview.appendChild(img); 
        dvPreview.appendChild(textbox); 
       } 
       reader.readAsDataURL(file); 
      } else { 
       alert(file.name + " is not a valid image file."); 
       dvPreview.innerHTML = ""; 
       return false; 
      } 
     } 
    } else { 
     alert("This browser does not support HTML5 FileReader."); 
    } 
} 

}

Answer 1

私はこれを試して私のために働いています。コード：

<pre>Please enter your files:<input class="fileupload" type="file" name="img_slide" multiple> 
       <div id="dvPreview"></div></pre> 

<input class="fileupload" type="file" name="img_capa" multiple> 
      <div id="dvPreview2"></div> 



window.onload = function() { 

    var fileUpload = document.getElementsByClassName("fileupload"); 

    for(var i = 0; i < fileUpload.length; i++){ 
    fileUpload[i].onchange = showImgOnChange; 
    } 




} 


var showImgOnChange = function() { 

    if (typeof (FileReader) != "undefined") { 
     var dvPreview = this.nextElementSibling; 

     dvPreview.innerHTML = ""; 
     var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/; 

      for (var i = 0; i < this.files.length; i++) { 
      var file = this.files[i]; 
      if (regex.test(file.name.toLowerCase())) { 
      var reader = new FileReader(); 
      reader.onload = function (e) { 
       var img = document.createElement("IMG"); 

       img.height = "100"; 
       img.width = "100"; 
       img.src = e.target.result; 
       dvPreview.appendChild(img); 
       dvPreview.appendChild(textbox); 
      } 
      reader.readAsDataURL(file); 
      } else { 
      alert(file.name + " is not a valid image file."); 
      dvPreview.innerHTML = ""; 
      return false; 
      } 

        } 
     } else { 
     alert("This browser does not support HTML5 FileReader."); 
     } 
} 

今私はそのコードを説明します：

私はそのタイプのすべての入力のための一つのクラスを使用します。そのクラスを使用して、私はすべての要素の入力を取得し、すべての入力で私はonchange関数showImgOnChangeを割り当てます（複数の要素への変更に同じ関数を関連付けるためのトリック）。その後、機能で、この一般化する：

var dvPreview = this.nextElementSibling; 

これはDOMでこの要素の次の要素を取ります。

var dvPreview = document.getElementById("dvPreview"); 

を、私はこれを使用していました。それ以外の場合は、画像を表示するdivにクラスを関連付けることができ、そのクラスを持つ次の要素を検索することができます。

希望します。