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."); 
     } 
} 

現在，我將解釋代碼：

我使用一個類爲該類型的每個輸入。使用這個類我得到所有的元素輸入，並在每次輸入我改變函數showImgOnChange（只是一個把變化關聯到多個元素的技巧）。在此之後，在功能，概括如下：

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

我用這個：

var dvPreview = this.nextElementSibling; 

這需要下一個元素的該元素在DOM。否則，您可以將一個類與div關聯起來，以便顯示圖像並搜索具有該類的下一個元素。

希望它有幫助