bootstrap Fileinput插件的使用實例

給大家分享一個FileInput的使用實例，也是自己開發中遇到的問題

如何使用FileInput

使用時的樣式

使用FileInput只需要將相關的js，css下載引用即可，相信當大家遇到這個問題的時候已經有了bootstrap開發的知識，這些基礎已經不成問題

選擇文件後的樣式，如果配置妥當的話，點擊上傳按鈕進度條將會讀滿並顯示Done

前台代碼，這裡有一個小小的問題 form表單的enctype屬性

表單中enctype="multipart/form-data"的意思，是設置表單的MIME編碼。默認情況，這個編碼格式是application/x-www-form-urlencoded，不能用於文件上傳；只有使用了multipart/form-data，才能完整的傳遞文件數據，進行下面的操作.
但是我們不需要配置，否則會出現form表單提交其他數據的問題

[html] view plain copy

1. <div

   class="line line-dashed line-lg pull-in"

   ></div>

2. <div

   class="form-group"

   >

3. <label

   class="col-sm-3 control-label"

   >

   照片

   </label>

4. <div

   class="col-sm-9"

   >

5. <input

   id="JSh_ZhP" type="file" class="file" name="file"

   >

6. <input

   type="hidden" id="JSh_ZhP_Path" name="tbllecturer.JSh_ZhP"

   />

7. <p

   class="help-block"

   >

   支持jpg、jpeg、png、gif格式，大小不超過2.0M

   </p>

8. </div>

接下來就說說如何配置相應的js

默認的fileinput.js應該有一個頁面載入完畢的動作，我們打開fileinput.js，果然有相應的方法。

[javascript] view plain copy

1. $(document).ready(

   function

   () {

2. var

   $input = $("input.file[type=file]");

3. if

   ($input.length) {
4. $input.fileinput();
5. }<span stylex="font-family:Arial, Helvetica, sans-serif;"> });</span>

接下來將它注釋掉，我們自己寫初始化方法，在fileinput,js里添加initFileInput方法，並自己完成載入時的方法，文件上傳的一般邏輯應該是點擊文件上傳，將文件在後台做相應的處理後將存儲的Url返回添加到form表單中，跟隨form表單一起提交到資料庫中。.on（）方法為fileInput上傳文件後的回調方法，之後對返回的數據處理即可。

[javascript] view plain copy

1. function

   initFileInput(ctrlName,uploadUrl) {

2. var

   control = $("#" + ctrlName);
3. control.fileinput({
4. language: "zh", //設置語言
5. uploadUrl: uploadUrl,
6. showUpload:

   true

   , //是否顯示上傳按鈕
7. showRemove:

   true

   ,
8. showPreview :

   true

   ,
9. dropZoneEnabled:

   false

   ,
10. showCaption:

    true

    ,//是否顯示標題
11. allowedPreviewTypes: ["image"],
12. allowedFileTypes: ["image"],
13. allowedFileExtensions: ["jpg", "png", "gif"],
14. maxFileSize : 2000,
15. maxFileCount: 1,
16. //initialPreview: [
17. //預覽圖片的設置
18. // "<img src="http://127.0.0.1:8080/NewsManageSys/plugin/umeditor1_2_2/jsp/upload/20161030/55061 477813913474.jpg" class="file-preview-image" alt="肖像圖片" title="肖像圖片">",
19. //],
21. }) }
22. $(document).ready(

    function

    () {

23. var

    path = rootPath + "/lecturer/picture/upLoad.shtml";
24. initFileInput("JSh_ZhP",path);
25. $("#JSh_ZhP").on("fileuploaded",

    function

    (event, data, previewId, index) {
26. $("#JSh_ZhP_Path").val(data.response);
28. });
30. });

後台處理的代碼，我直接將文件存在了本地並將路徑返回。

[java] view plain copy

1. @ResponseBody
2. @RequestMapping("picture/upLoad")

3. public

   String upLoad(@RequestParam("file")CommonsMultipartFile file)

4. throws

   Exception{
6. String path="E:/images/"+

   new

   Date().getTime()+file.getOriginalFilename();
7. File newFile =

   new

   File(path);
8. file.transferTo(newFile);
9. Map<String, String> map =

   new

   HashMap<String, String>();
10. map.put("pathUrl", path);
11. JSONArray json = JSONArray.fromObject(map);

12. return

    path;
13. }

到這裡大家應該學會了fileinput的使用，如有問題請留言

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！