Bootstrap FileInput插件和model模型配合使用（增、改）

原因
（1）Bootstrap model的原理是show和hide页面。导致页面新增修改时都不能重新渲染页面。
        （2）Bootstrap FileInput插件初始化后对其的操作没有我想要的效果（例如：在不重新渲染页面的情况。需要显示预览图片。）

问题
在Bootstrap model和Bootstrap FileInput配合使用中遇到如下问题。1.新增页面中，上传图片到一半。点击关闭无法初始化FileInput插件 （重新点击新增页面，上次上传的图片依然还在）。2.点击修改页面需要显示预览图片。（找了好久，没找到对象的方法）

后来利用移除对象，重新添加对象的方法。使用每次点击都初始化FileInput插件。

代码： 
jsp--前台

<divclass="kv-avatar "id="behindId"style="width:250px;">
<inputid="behind_image"name="behind_image"type="file"accept="image/png, image/jpeg">
</div>

js部分

1.需要删除div包含的Input
2.input的对应的name
3.服务器返回的图片路径放置的位置
4.需要预览的图片路劲。（不需要预览放空）
initfileinput("behindId","behind_image","behindUrl","");

//初始化上传框
function initfileinput(deleteId,ctrlName,valueId,image_url) {
    //删除input框
    $("#"+deleteId).children().remove();
    var input_image = "<input id="+ctrlName+" name="+ctrlName+" type=\"file\" accept=\"image/png, image/jpeg\" data-preview-url=\"\">\n";
    $("#"+deleteId).html(input_image);

    var btnCust = '<button type="button" class="btn btn-default" title="Add picture tags" ' +
        'οnclick="alert(\'Call your custom code here.\')">' +
        '<i class="glyphicon glyphicon-tag"></i>' +
        '</button>';
    btnCust = '';

    var  ini_image='';
    if(image_url!=""){
        ini_image="/"+image_url;
        $(".file-preview-image.kv-preview-data").find("img").css("width","");
    }
    var control = $('#' + ctrlName);
    control.fileinput({
        uploadUrl            : '/image/deliver_image_upload',
        uploadAsync          : true,
        language             : 'zh',
        showPreview          : true,
        showUpload           : false,
        showRemove           : true,
        previewFileType      : "image",
        initialPreviewAsData : true, // 特别重要
        allowedPreviewTypes  : ['image'],
        allowedFileExtensions: ['jpg','png'],
        overwriteInitial     : true,
        maxFileSize          : 1024,
        minImageWidth        : 300, //图片的最小宽度
        minImageHeight       : 450,//图片的最小高度
        msgErrorClass        : 'alert alert-block alert-danger',
        initialPreview       :  ini_image,
        defaultPreviewContent: "<img id='defaultPreviewImg'  alt='身份证图片' style='width:160px'>",
        layoutTemplates      : {main2: '{preview} ' + btnCust + ' {remove} {browse}'},
        allowedFileTypes     : ['image'],
        uploadExtraData      : function (previewId, index) {
            //图片上传附加参数
            return {
                picRange:parseInt(x1*imgPecent)+","+parseInt(y1*imgPecent)+","+parseInt(x2*imgPecent)+","+parseInt(y2*imgPecent),
                file_name:ctrlName
            }
        }
    }).on('fileuploaded', function (event, data, previewId, index) {
        var response = data.response;
        $("#"+valueId).val(response.data.url);
    });

    if(image_url!=""){
        $(".file-preview-image.kv-preview-data").css("width","160px");
    }

}