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关联起来，以便显示图像并搜索具有该类的下一个元素。

希望它有帮助