fileInput實戰總結

fileinput組件實戰總結

fileinput是一個增強的基於Bootstrap3.x和HTML5的文件上傳工具，具備多種格式文件的預覽功能，
另外，它包含了基於AJAX的上傳，拖拽和撤銷文件，可以顯示上傳文件的進度，並且可以任意去預覽，
添加，刪除文件。

在本系統使用的功能

機構或銀行圖標的預覽功能

使用fileinput

如果要使用fileinput組件，需要引入相應的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設置為file，同時設定一個id。

<div class="col-sm-8">
   <input type="file" id="input-2" class="form-control" placeholder="" name="license">
</div>

• js初始化簡介

 $('#input-2').fileinput({
    fileinputLocales: 'zh',   //設置語言
    allowedFileExtensions : ['jpg', 'png','gif','jpeg'],//接收的文件后綴
    showUpload: false,        //是否顯示上傳按鈕
    removeLabel: '移除',
    showCaption: false,       //是否顯示標題
    showRemove:false,         //是否顯示移除按鈕
    showClose:false,          //是否顯示關閉按鈕
    showPreview:true,         //是否顯示預覽功能
    maxFileSize: 4096,        //設置最大的上傳字節
    browseClass: "btn btn-primary", //按鈕樣式  
    enctype: 'multipart/form-data',           
    previewFileIcon: "<i class='glyphicon glyphicon-king'></i>", 
    fileSingle: '文件',
    filePlural: '個文件',
    browseLabel: '選擇 &hellip;',
    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%",},
    ],

    });

使用過程中所遇到的問題

• form表單的編碼類型

  因為使用了input[type=file]，一定要注意form表單要聲明編碼類型為enctype="multipart/form-data"。

• 當input的class中有file時會導致初始化錯誤

  如果將使用了fileinput初始化的input輸入框的class設置為file的話，fileinput對於該輸入框的設置無效。

• 當在頁面中打開多個fileinput初始化后的input時，存在fileinput輸入框的緩存問題。在項目機構管理處應用時，

  在機構列表中點擊每一個機構都可以查看此機構的詳情-當然包括營業執照和簽署協議的詳情。當我們點擊了機構1的詳情，
  fileinput初始化了模態框中的圖片預覽。當我們關閉機構1的詳情，再去打開機構2的詳情框時，顯示的預覽圖片還是
  機構1的，這時對於input的二次初始化就不起作用了。這時的解決方法是手動操作dom,手動設置image的src屬性。
  代碼如下：

$('.file-preview-image').each(function (){
    this.src= 'http://'+dataImgUrl+'?t='+new Date().getTime();
});