动态上传图片预览答案

【问题标题】：Dynamic upload image preview动态上传图片预览
【发布时间】：2016-10-10 10:21:42
【问题描述】：

我正在使用脚本来创建图片上传预览图片 (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--;
})

【问题讨论】：

在这种情况下，我的英语很抱歉，我想说的是，当我尝试动态添加新的输入字段时，我的输入文件预览图像中断，停止工作。
您需要在附加新包装后调用$(imageupload).imageupload()。这应该可以解决它
你好@AdamAzad 我试着把 $imageupload.imageupload();但它不起作用：S，所以我尝试在此行之前添加'var $imageupload = $（'.imageupload'）;'，但如果我尝试在第一个缩略图中插入图像，然后再添加一个字段，前一个消失。

标签： javascript jquery twitter-bootstrap

【解决方案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--;
            })
        });

【讨论】：