HTML5-Bildvorschau funktioniert nicht mit geklonter Dateieingabe (ist für Original)

Question

Was ich versuche zu tun ist ein modales Formular, das eine Dateieingabe zusammen mit verschiedenen anderen Formularfeldern enthält, dann, sobald das modale Formular übermittelt wird, die Die Dateieingabe sowie andere Formularelemente werden dann in das Hauptformular verschoben, das ich schließlich einreichen möchte. Dann setze ich das Formular zurück und ersetze die ursprüngliche Dateieingabe durch einen Klon des Originals, um weitere Einträge zu akzeptieren.

Alles funktioniert perfekt gut, außer dass die HTML-5-Vorschau nicht auf geklonten Dateieingaben funktioniert, so dass es nur auf die ursprüngliche Dateieingabe funktioniert, die beim Laden der Seite vorhanden ist und keine nachfolgenden Eingaben.

Ich habe versucht, den Event-Handler zu ändern und handleImages einmal aufzurufen, sobald der Klon dem DOM hinzugefügt wird, aber keiner schien einen Unterschied zu machen, und ich kann mir nicht vorstellen, was ich als nächstes versuchen soll.

Ich habe einen codpen und den Code gemacht ist auch unter:

HTML

<div class="container"> 
    <form action="" class="form-inline" id="image-form"> 

    <label class="btn btn-info upload-button"> 
     Tap to Select Images 

     <input type="file" style="display: none" multiple accept="image/*" capture="camera"> 
    </label> 

    <button type="button" class="btn btn-primary" id="save-image">Save Images</button> 

    <div class="preview"> 
     <div class="row"> 
     </div> 
    </div> 

    </form> 

    <div id="saved-images" style="display: none;"></div> 
</div> 

JS

var imageCount = 0; 

var ImageUpload = function() { 

    var handleImages = function() { 

     document.querySelector('#image-form input[type="file"]').addEventListener('change', handleFileSelect, false); 

     // also tried 
     // $(document).on('change', '#image-form input[type="file"]', handleFileSelect); 
    } 

    var handleFileSelect = function(e) { 

     if (!e.target.files || !window.FileReader) return; 

     var $element = $(e.srcElement).closest('form').find('.preview > .row'); 
     $element.empty(); 

     var $srcElement = $(e.srcElement); 

     var files = e.target.files; 
     var filesArr = Array.prototype.slice.call(files); 

     filesArr.forEach(function(f) { 

      if (!f.type.match("image.*")) { 
       return; 
      } 

      var reader = new FileReader(); 

      reader.onload = function(e) { 

       var html = ` 
        <div class="col-lg-3 col-md-4 col-xs-6 thumbnail m-t m-b m-r m-l"> 
        <img class="img-responsive" src="${e.target.result}" alt="${f.name}"> 
        <div class="title bg-success">${f.name}</div> 
        </div> 
       `; 


       $element.append(html); 
      } 

      reader.readAsDataURL(f); 
     }); 

    } 

    var handleSaveImage = function() { 

     $(document).on('click', '#save-image', function(f) { 

      // Clone the "real" input element 
      var $real = $('#image-form input[type="file"]'); 
      var $clone = $real.clone(true); 

      /* Also tried: 
      var $clone = $real.clone(false); 
      handleImages(); 

      and 
      var $clone = $real.clone(true).val(''); 
      */ 

      // Put the cloned element directly after the real element 
      $clone.insertAfter($real); 

      // change the name and class of the real input 
      $real.addClass(`image-${imageCount}`); 

      // Move the real element 
      $real.appendTo('#saved-images'); 

      imageCount++; 

      resetImageForm(); 
     }); 
    } 

    var resetImageForm = function() { 
     $('#image-form').trigger('reset'); 
     $('#image-form .preview').empty(); 
    } 

    return { 
     // main function to initiate the module 
     init: function() { 
      handleImages(); 
      handleSaveImage(); 
     } 

    }; 


}(); 

jQuery(document).ready(function() { 
    ImageUpload.init(); 
}); 

Wenn ich die Ereignis-Listener $(document).on('change', '#image-form input[type="file"]', handleFileSelect); dann ändern Der Vorschaucode wird jedes Mal erreicht, aber es gibt keine Vorschau hier ist eine gegabelt Version zu zeigen, was ich meine enter link description here

Answer 1

ich Ihren Code gesehen und hier ist Lösung jsfiddle

use $(e.target) instead of $(e.srcElement)