Question

我正在使用jquery添加多个字段。当我们第一次选择图像时，图像预览显示完美。当我们点击添加按钮并选择图像预览不起作用时。

我的错误是什么，我可以在Jquery脚本中做错吗？

或

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

在上传多个图像上传之前预览图像

1 个答案: