fileinput 的总结
fileinput組件實(shí)戰(zhàn)總結(jié)
fileinput是一個(gè)增強(qiáng)的基于Bootstrap3.x和HTML5的文件上傳工具，具備多種格式文件的預(yù)覽功能，
另外，它包含了基于AJAX的上傳，拖拽和撤銷文件，可以顯示上傳文件的進(jìn)度，并且可以任意去預(yù)覽，
添加，刪除文件。
在本系統(tǒng)使用的功能
機(jī)構(gòu)或銀行圖標(biāo)的預(yù)覽功能
使用fileinput
如果要使用fileinput組件，需要引入相應(yīng)的css和js文件
-
引入css文件
<link rel="stylesheet" href="/genius/static/plugins/fileInput/fileinput.css">?
-
引入js文件
<script src="/genius/static/plugins/fileInput/fileinput.js"></script> <script src="/genius/static/plugins/fileInput/zh.js"></script>//漢化文件?
-
html初始化
將input輸入框的type設(shè)置為file，同時(shí)設(shè)定一個(gè)id。
<div class="col-sm-8"><input type="file" id="input-2" class="form-control" placeholder="" name="license"> </div>?
-
js初始化簡(jiǎn)介
- $('#input-2').fileinput({
fileinputLocales: 'zh', //設(shè)置語(yǔ)言
allowedFileExtensions : ['jpg', 'png','gif','jpeg'],//接收的文件后綴
showUpload: false, //是否顯示上傳按鈕
removeLabel: '移除',
showCaption: false, //是否顯示標(biāo)題
showRemove:false, //是否顯示移除按鈕
showClose:false, //是否顯示關(guān)閉按鈕
showPreview:true, //是否顯示預(yù)覽功能
maxFileSize: 4096, //設(shè)置最大的上傳字節(jié)
browseClass: "btn btn-primary", //按鈕樣式
enctype: 'multipart/form-data',
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
fileSingle: '文件',
filePlural: '個(gè)文件',
browseLabel: '選擇 …',
removeLabel: '移除',
removeTitle: '清除選中文件',
overwriteInitial: true,
autoReplace :true,
initialPreview: [
'http://'+dataImgUrl+'?r='+Math.random(),
],
previewSettings:{width:"100%",
},
initialPreviewAsData: true, // identify if you are sending preview data only and not the raw markup
initialPreviewFileType: 'image', // image is the default and can be overridden in config below
initialPreviewConfig: [{ width: "100%",},
],});
?
?
?使用過(guò)程中所遇到的問(wèn)題
-
form表單的編碼類型
因?yàn)槭褂昧薸nput[type=file]，一定要注意form表單要聲明編碼類型為enctype="multipart/form-data"。 -
當(dāng)input的class中有file時(shí)會(huì)導(dǎo)致初始化錯(cuò)誤
如果將使用了fileinput初始化的input輸入框的class設(shè)置為file的話，fileinput對(duì)于該輸入框的設(shè)置無(wú)效。 -
當(dāng)在頁(yè)面中打開(kāi)多個(gè)fileinput初始化后的input時(shí)，存在fileinput輸入框的緩存問(wèn)題。在項(xiàng)目機(jī)構(gòu)管理處應(yīng)用時(shí)，
在機(jī)構(gòu)列表中點(diǎn)擊每一個(gè)機(jī)構(gòu)都可以查看此機(jī)構(gòu)的詳情-當(dāng)然包括營(yíng)業(yè)執(zhí)照和簽署協(xié)議的詳情。當(dāng)我們點(diǎn)擊了機(jī)構(gòu)1的詳情，
$('.file-preview-image').each(function (){ this.src= 'http://'+dataImgUrl+'?t='+new Date().getTime(); });
fileinput初始化了模態(tài)框中的圖片預(yù)覽。當(dāng)我們關(guān)閉機(jī)構(gòu)1的詳情，再去打開(kāi)機(jī)構(gòu)2的詳情框時(shí)，顯示的預(yù)覽圖片還是
機(jī)構(gòu)1的，這時(shí)對(duì)于input的二次初始化就不起作用了。這時(shí)的解決方法是手動(dòng)操作dom,手動(dòng)設(shè)置image的src屬性。
代碼如下：?
?
轉(zhuǎn)載于:https://www.cnblogs.com/valarchie/p/7496545.html
總結(jié)
以上是生活随笔為你收集整理的fileinput 的总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 1080 两个数的平方和（数学）
- 下一篇： IT团队之非正式沟通