在上傳多個圖像之前預覽圖像上傳

Question

我正在使用jquery添加多個字段。當我們第一次選擇圖像時，圖像預覽顯示完美。當我們點擊添加按鈕並選擇圖片預覽不起作用時。

什麼是我的錯誤，我可以做任何錯誤的JQuery腳本？

this is URL of my jsfiddle

或

<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

你onchange事件代碼沒有得到正確形成。追加你的html，如下所示。

$(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>');