动态上传图片预览

Question

我正在使用脚本创建图像上传预览图像(http://www.jqueryscript.net/demo/Image-Upload-Preview-Plugin-With-jQuery-Bootstrap-img-upload/)。工作得很好，但是我有一些问题，在我的表单中我需要创建添加输入功能，在我的例子中，用户可以动态添加更多的字段，如果我在我的html中插入多个输入文件字段，我没有问题，只有当我单击添加按钮创建新的输入字段时，问题才会开始。一些事件会被触发，并开始显示只有在我插入图像后才会显示的按钮。在上面，我保留了动态添加输入字段的代码。

示例：https://jsbin.com/bozeyuface/edit

Js：

//inputs
var max_fields = 10; //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="col-md-4"><div class="form-group"><input class="form-control" type="text" placeholder="Brand" name="brand[]"></div><div class="form-group"><input class="form-control" type="text" placeholder="title" name="title[]"></div><div class="form-group"><input class="form-control" type="text" placeholder="url" name="url[]"></div><div class="form-group"><div class="imageupload panel panel-default"><div class="file-tab panel-body"><label class="btn btn-default btn-file"><span>Browse</span><input type="file" name="file"></label><button type="button" class="btn btn-default">Remove</button></div><div class="url-tab panel-body"><div class="input-group"><input type="text" class="form-control hasclear" placeholder="Image URL"><div class="input-group-btn"><button type="button" class="btn btn-default">Submit</button></div></div><button type="button" class="btn btn-default">Remove</button><input type="hidden" name="image-url[]"></div></div></div><a href="#" class="remove_field btn btn-danger btn-sm"><i class="fa fa-trash"></i> Remove</a></div>');
    }
});

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

Answer 1

只需添加以下代码，并使用计数器向div添加一个唯一的类。如果它对你有效，那就接受这个答案

             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="col-md-4 div-'+x+'"><div class="form-group"><input class="form-control" type="text" placeholder="Brand" name="brand[]"></div><div class="form-group"><input class="form-control" type="text" placeholder="title" name="title[]"></div><div class="form-group"><input class="form-control" type="text" placeholder="url" name="url[]"></div><div class="form-group"><div class="imageupload panel panel-default"><div class="file-tab panel-body"><label class="btn btn-default btn-file"><span>Browse</span><input type="file" name="file"></label><button type="button" class="btn btn-default">Remove</button></div><div class="url-tab panel-body"><div class="input-group"><input type="text" class="form-control hasclear" placeholder="Image URL"><div class="input-group-btn"><button type="button" class="btn btn-default">Submit</button></div></div><button type="button" class="btn btn-default">Remove</button><input type="hidden" name="image-url[]"></div></div></div><a href="#" class="remove_field btn btn-danger btn-sm"><i class="fa fa-trash"></i> Remove</a></div>').find('.div-'+x+' .imageupload').imageupload();
                }
            });

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