前言:項目開發完成需要一個文件上傳的功能,使用普通的“type=file”很快就完成了,趁着時間還充裕嘗試使用界面美觀,功能強大的Bootstrap Inputfile插件完成,由於很久沒寫前段的代碼,期間踩過挺多坑,終於實現使用Bootstrap Inputfile 插件異步上傳多個文件。
⦁ bootstrap input file 多文件上傳:
在input中不加入multiple屬性時,將會是單文件上傳。
當在input元素中加入multiple屬性時,將會實現多文件上傳:
- 官方文檔直接使用“multiple”並沒有給其賦值,但是我使用的是idea開發平臺,運行程序時直接報錯:
查看官方實例(http://plugins.krajee.com/file-basic-usage-demo),官方的例子中直接使用multiple,並沒有爲其賦值。
idea上程序運行報錯:
在w3cshool(http://www.w3school.com.cn/tags/att_input_multiple.asp)查到解決方案,還是前段代碼敲太少的緣故。
⦁ 中文不顯示的問題:
顯示中文要引入zh.min.js包,運行程序:
出錯原因:沒有和另外兩個包的版本匹配:
解決辦法:上面三個包使用的版本要一致。
- 沒有引入jquery包報錯:無法正常顯示頁面:
- 沒引入bootstrap.min.js包報錯:
不使用放大文件的話,不會報錯,當點擊放大文件的圖標將會產生如上的錯誤。引入bootstra.min.js可解決。
- jquery.min.js引入在bootstrap.min.js之後報錯: