javascript - 上传多张图片上传前预览图片

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