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" ' +
'onclick="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");
}

}