Vorschau Bild vor dem Hochladen der mehrere Bilder hochladen

Question

Ich benutze jquery zum Hinzufügen mehrerer Felder. Wenn wir ein Bild zum ersten Mal auswählen, wird die Bildvorschau perfekt angezeigt. wenn wir auf Hinzufügen klicken und eine Vorschau auswählen, die nicht funktioniert.

was war mein Fehler, darf ich falsch in Jquery Skript machen?

this is URL of my jsfiddle

oder

<div class="form-group form-md-line-input input_fields_wrap"> 
             <label class="col-md-3 control-label" for="form_control_1">Image</label> 
             <div class="col-md-9"> 
              <input type="file" class="form-control" placeholder="" name="simage[]" onchange="document.getElementById('pre-image').src = window.URL.createObjectURL(this.files[0])" accept="image/*"> 
              <img id="pre-image" alt="select image" width="100" height="100" /> <button type="button" class="add_field_button">+</button> 
              <div class="form-control-focus"> </div>         
             </div>         
            </div> 


    <script> 
    $(document).ready(function() { 
     var max_fields  = 20; //maximum input boxes allowed 
     var wrapper   = $(".input_fields_wrap"); //Fields wrapper 
     var add_button  = $(".add_field_button"); //Add button ID 

     var x = 1; //initlal text box count 
     $(add_button).click(function(e){ //on add input button click 
      e.preventDefault(); 
      if(x < max_fields){ //max input box allowed 
       x++; //text box increment 
       $(wrapper).append('<div class="clearfix"></div><div class="form-group form-md-line-input input_fields_wrap"><label class="col-md-3 control-label" for="form_control_1">Image</label><div class="col-md-9"><input type="file" class="form-control" placeholder="" name="simage[]" onchange="document.getElementById("pre-image'+x+'").src = window.URL.createObjectURL(this.files[0])" accept="image/*"><img id="pre-image'+x+'" alt="select image" width="100" height="100" /> <button type="button" class="remove_field">-</button><div class="form-control-focus"> </div></div></div>'); //add input box 
      } 
     }); 

     $(wrapper).on("click",".remove_field", function(e){ //user click on remove text 
      e.preventDefault(); $(this).parent('div').parent('div').remove(); x--; 
     }) 
    }); 
    </script> 

Answer 1

Ihr Onchange Ereigniscode nicht richtig ausgebildet zu werden. Fügen Sie Ihren HTML-Code wie unten gezeigt hinzu.

$(wrapper).append('<div class="clearfix"></div><div class="form-group form-md-line-input input_fields_wrap"><label class="col-md-3 control-label" for="form_control_1">Image</label><div class="col-md-9"><input type="file" class="form-control" placeholder="" name="simage[]" onchange="document.getElementById(\'pre-image'+x+'\').src = window.URL.createObjectURL(this.files[0])" accept="image/*"><img id="pre-image'+x+'" alt="select image" width="100" height="100" /> <button type="button" class="remove_field">-</button><div class="form-control-focus"> </div></div></div>');