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

今天药忘吃喽~ 2022-06-03 05:11 158阅读 0赞

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

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

##    后来利用移除对象，重新添加对象的方法。使用每次点击都初始化FileInput插件。      代码：    jsp--前台 ##

###    **<****div****class=****"kv-avatar "****id=****"behindId"****style=****"****width****:****250****px****;****"****>**   **<****input****id=****"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"**); \} \} ###