Java Script-Funktion wiederverwenden, um mehrere Bilder anzuzeigen Vorschau

Question

Hallo!

Ich schrieb die einzelne Java Script-Funktion, um die Bildvorschau vor dem Hochladen zu zeigen. Zum Hochladen einzelner Dateien funktioniert mein Code einwandfrei.

Aber jetzt möchte ich mehrere Bild-Upload-Optionen geben, indem Sie dem Benutzer mehrere Auswahloptionen geben (siehe den Schnappschuss). Auch dafür möchte ich meine Funktion, die die Vorschau des ausgewählten ersten Bildes anzeigt, wiederverwenden (siehe Bild im Schnappschuss)

Wie würde ich meinen HTML-Code ändern und meine Skriptfunktion wiederverwenden?

html

<form action="upload.php" method="post" enctype="multipart/form-data"> 
    <div id="wrapper" style="margin-top: 20px;"> 
    <input id="fileUpload" name="uploadedFile" type="file"/> 
    <input id="fileUpload2" name="" type="file"/> 
    <input id="fileUpload3" name="uploadedFile" type="file"/> 
    <div id="image-holder"></div> 

</div> 
</form> 

Javascript

<script> 
$(document).ready(function() { 
     $("#fileUpload").on('change', function() { 
      //Get count of selected files 
      var countFiles = $(this)[0].files.length; 
      var imgPath = $(this)[0].value; 
      var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase(); 
      var image_holder = $("#image-holder"); 
      image_holder.empty(); 
      if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") { 
      if (typeof(FileReader) != "undefined") { 
       //loop for each file selected for uploaded. 
       for (var i = 0; i < countFiles; i++) 
       { 
       var reader = new FileReader(); 
       reader.onload = function(e) { 
        $("<img />", { 
        "src": e.target.result, 
        "class": "thumb-image" 
        }).appendTo(image_holder); 
       } 
       image_holder.show(); 
       reader.readAsDataURL($(this)[0].files[i]); 
       } 
      } else { 
       alert("This browser does not support FileReader."); 
      } 
      } else { 
      alert("Pls select only images"); 
      } 
     }); 
     }); 
</script> 

Answer 1

Dies ist, was Klassen sind für. Sie rufen nur Ihren jQuery für die fileUpload-ID auf. Und wenn Sie den gleichen Bildhalter für mehr als ein Bild verwenden, sollten Sie es nicht jedes Mal löschen.

Ich habe Ihren Code eine kleine Menge umstrukturiert. Versuche dies.

html

<form action="upload.php" method="post" enctype="multipart/form-data"> 
<div id="wrapper" style="margin-top: 20px;"> 
    <input class="fileUploadClass" id="fileUpload" name="uploadedFile" type="file"/> 
    <input class="fileUploadClass" id="fileUpload2" name="" type="file"/> 
    <input class="fileUploadClass" id="fileUpload3" name="uploadedFile" type="file"/> 
    <div id="image-holder"></div> 

</div> 

JavaScript

<script> 
$(document).ready(function() { 
    $(".fileUploadClass").on('change', function() { 
     //Get count of selected files 
     var countFiles = $(this)[0].files.length; 
     var imgPath = $(this)[0].value; 
     var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase(); 
     var image_holder = $("#image-holder"); 
     // image_holder.empty(); 
     if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") { 
      if (typeof(FileReader) != "undefined") { 
       //loop for each file selected for uploaded. 
       for (var i = 0; i < countFiles; i++) 
       { 
        var reader = new FileReader(); 
        reader.onload = function(e) { 
         $("<img />", { 
          "src": e.target.result, 
          "class": "thumb-image" 
         }).appendTo(image_holder); 
        } 
        image_holder.show(); 
        reader.readAsDataURL($(this)[0].files[i]); 
       } 
      } else { 
       alert("This browser does not support FileReader."); 
      } 
     } else { 
      alert("Pls select only images"); 
     } 
    }); 
});