文件上傳控件bootstrap-fileinput的使用

1.插件下載地址：https://github.com/kartik-v/bootstrap-fileinput

2.插件的引用

　　須要引用jquery

　　須要結合bootstrap使用，即頁面須要引入bootstrap相關js和css文件

　　引用fileinput.js 和css

　　中文須要引用js/locales/zh.js

　　須要主題樣式時引用themes下相關文件夾中的js和css

　　tips：最好以上按順序引用，省得出現莫名其妙的問題，好比zh.js必須在fileinput.js後引用不然無效

3.插件的代碼部分

 

4.插件的部分屬性說明

　　1.multiple表示容許同時上傳多個文件，class=「file-loading」表示標籤的樣式。這裏很重要，若是class="file"，則中文化不能生效。

　　2.accept 屬性只能與 <input type="file"> 配合使用。它規定可以經過文件上傳進行提交的文件類型。這個屬性和插件allowedFileExtensions屬性看起來同樣可是插件的

　　allowedFileExtensions屬性只是你選擇了文件類型以後他會提示你禁止上傳,如圖

 

　　而accept 屬性則是在點擊選擇文件以後,文件框裏只會出現你寫在accept 屬性的後綴名的文件.能夠在一開始就避免用戶選擇錯誤的文件類型,固然若是直接拖進控件,那

也是沒有辦法,如圖:

　　這張是沒有加accept 屬性

 　　這張是加了accept="image/*,.pdf,.xls,.xlsx,.docx,.doc"的圖片

　　

　　3.部分要使用的方法

 

　　4.有的想去除掉控件中的一些按鈕,如圖

 

　　showUpload,showRemove屬性是是否顯示紅色的部分的移除,上傳按鈕是否顯示.

　　而黑色部分按鈕的隱藏顯示則是由fileActionSettings這個屬性來決定的

　　具體的內容請看http://plugins.krajee.com/file-input/plugin-options#fileActionSettings

　　寫一個class內容爲display:none;而後把這個class賦值給對應的屬性就ok了.如圖

　　　　

 

 　　效果如第三張圖,圖片右下角刪除按鈕已被禁用掉.

 5.Controller中的代碼

 

 

 

 ok,這篇文章只是介紹了一個大概的部分.具體的也可參考網上大佬們的介紹.