扒一扒使用boostrap-fileinput上傳插件遇到的坑，Bootstrap-fileinput上傳插件的使用詳解

轉自 https://blog.csdn.net/zlb_lover/article/details/76548772

由于公司項目的需求，需要實作動植物名錄的添加，包括姓名等資訊和圖檔等，需要使用bootstrap-fileinput的上傳插件，在送出添加界面表單資料的同時上傳一張或者多張圖檔，并将上傳的圖檔儲存到本地磁盤中(本文是f:盤的目錄下)，在在實作的時候，不适用bootstrap-fileinput上傳插件本身的上傳按鈕（因為本身的按鈕隻能上傳圖檔），需要點選送出，将表單的其他資訊和圖檔一起送出到背景。

實作思路：原來我的思路是不使用插件的上傳按鈕，而自己通過js将插件裡面的多檔案與表單一起送出，但是到背景隻能擷取到最後一個檔案，我不是檔案數組。我查了很多辦法好像都沒辦法，後來改變思路：還是自己用js觸發送出表單，隻是先将表單其他資料傳到背景儲存傳回資料庫id,然後通過$(’#add_bachPic’).fileinput(‘upload’);觸發送出檔案上傳，并傳遞額外參數id,最後根據傳遞的額外參數，修改相應的實體類中的字段，将上傳的圖檔的名字，修改并儲存資料庫的pictureurl字段中！

一、先來說說bootstrap-fileinput .js

這個插件首頁位址是：http://plugins.krajee.com/file-input，可以從這裡看到很多Demo的代碼展示：http://plugins.krajee.com/file-basic-usage-demo。

這是一個增強的 HTML5 檔案輸入控件，是一個 Bootstrap 3.x 的擴充，實作檔案上傳預覽，多檔案上傳等功能。

一般情況下，我們需要引入下面兩個檔案，插件才能正常使用：

bootstrap-fileinput/css/fileinput.min.css

bootstrap-fileinput/js/fileinput.min.js

簡單的界面效果如下所示，和衆多上傳檔案控件一樣，可以接受各種類型的檔案。當然，我們也可以指定具體接受的檔案類型等功能。

如果需要考慮中文化，那麼還需要引入檔案：

bootstrap-fileinput/js/fileinput_locale_zh.js

這樣基于MVC的Bundles集合，我們把它們所需要的檔案加入到集合裡面即可。

//添加對bootstrap-fileinput控件的支援

css_metronic.Include("~/Content/MyPlugins/bootstrap-fileinput/css/fileinput.min.css");

js_metronic.Include("~/Content/MyPlugins/bootstrap-fileinput/js/fileinput.min.js");

js_metronic.Include("~/Content/MyPlugins/bootstrap-fileinput/js/fileinput_locale_zh.js");

bootstrap-fileinput的各個js下載下傳位址：http://download.csdn.net/detail/zlb_lover/9917925

本項目實作的效果如下：

實作的代碼如下

1、jsp中添加上傳的input 框。

2 js,中，（本項目主要涉及兩個js,分别是animal.js 和upload.js）

在animal.js中主要實作打開上傳的模态框，

關鍵方法如下：代碼中注釋為紅色部分，較為關鍵，具體作用看注釋。

$("#btn_insect_add").click(function () {

$(".insect").val("") //根據類名移除上一次增昆蟲名錄時的填寫的所有的内容。

$("#div_insect_file").empty();

var element=’’;

$("#div_insect_file").append(element);

insectFileInput(“insect_file”,"/SongshanManagement/animalcontent/addinsectPicture.html");

openModal(“insectAddDetail”);

});

2、upload的js中，實作的實路是，先點選送出，通過ajax送出表單的資訊，在送出成功的success響應方法中，觸發圖檔上傳的方法。

在bootstrap-fileinput的使用時，首先要初始化，方法如下：

$(function () {

fishFileInput(“fish_file”,"/SongshanManagement/animalcontent/addfishPicture.html");

}

//初始化魚類名錄資訊上傳的fileinput控件

function fishFileInput(ctrlName, uploadUrl) {

$("#fish_file").fileinput({

language: ‘zh’, //設定語言

uploadUrl: ‘/SongshanManagement/animalcontent/addFishPicture.html’, //上傳的位址

enctype: ‘multipart/form-data’,

allowedFileExtensions : [‘jpg’, ‘png’,‘bmp’,‘jpeg’],//接收的檔案字尾

showUpload: false, //是否顯示上傳按鈕

showPreview: true, //展前預覽

showCaption: false,//是否顯示标題

maxFileSize : 10000,//上傳檔案最大的尺寸

maxFilesNum : 10,//

dropZoneEnabled: false,//是否顯示拖拽區域

browseClass: “btn btn-primary”, //按鈕樣式

uploadAsync: false,

layoutTemplates :{

// actionDelete:’’, //去除上傳預覽的縮略圖中的删除圖示

actionUpload:’’,//去除上傳預覽縮略圖中的上傳圖檔；

actionZoom:’’ //去除上傳預覽縮略圖中的檢視詳情預覽的縮略圖示。

uploadExtraData:function (previewId, index) {

//向背景傳遞id作為額外參數，是背景可以根據id修改對應的圖檔位址。

var obj = {};

obj.id = fishId;

return obj;

}

}).on(“filebatchuploadsuccess”, function(event, data) {

if(data.response){

closeModal(‘fishAddDetail’) 關閉模态框。

$("#bootstraptable_fishcontent").bootstrapTable(“refresh”);

}

}).on(‘fileerror’, function(event, data, msg) { //一個檔案上傳失敗

console.log(‘檔案上傳失敗！’+msg);

});

}

3.送出按鈕的點選事件。

//新增魚類名錄模态框的送出按鈕點選事件。

KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲btn_add_fish").…("#fish_file").val().substring(KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲fish_file").val…("#fish_file").val().length).toUpperCase();

if (picturename ==".JPG" || picturename “.PNG” || picturename “” || picturename".BMP"|| picturename".JPEG") {

$.ajax({

type: ‘post’,

url: ‘/SongshanManagement/animalcontent/addfishcontent.html’,

data: KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲form_addfishCon…("#fish_file").val() != “”) {

$(’#fish_file’).fileinput(‘upload’); //觸發插件開始上傳。

}

else {

closeModal(‘fishAddDetail’);

$("#bootstraptable_fishcontent").bootstrapTable(“refresh”);

}

}
    });
}else {
    alert("隻能上傳.jpg，.png，.PNG,.JPG,bmp,jpeg格式的圖檔");
    return false;
}

});

背景方法。如下。

@RequestMapping(value="/addfishcontent.html")

@ResponseBody

public int addFishContent(FishContent fishContent) throws Exception {

int a=this.animalContentImp.addFishContent(fishContent);

return a;

}

@RequestMapping(value="/addFishPicture.html", method=RequestMethod.POST)

@ResponseBody

public String addFishPic(int id, MultipartHttpServletRequest request, @RequestParam MultipartFile[] fish_file){

try{

if(fish_file!=null&& fish_file.length>0){
     //組合image名稱，“#隔開”
     String pictureurl =""; //用來接收拼接各個圖檔的名字，并儲存到資料庫。
     for(int i=0;i<fish_file.length;i++){
         if(!fish_file[i].isEmpty()){
             pictureurl=pictureurl+UploadFileUtils.uploadImage(request,fish_file[i]);
         }
     }
     //上傳成功
     if(pictureurl!=null&&pictureurl.length()>0){
         System.out.println("上傳成功！"+pictureurl); //
         this.animalContentImp.updateFishPicture(id,pictureurl);
     }else {
         System.out.println("上傳失敗！");
     }
 }

} catch (Exception e) {

e.printStackTrace();

}

return “0”;

}

//儲存上傳的檔案的UploadFileUtils工具類如下：

public class UploadFileUtils {

public static String uploadImage(MultipartHttpServletRequest request, MultipartFile file) {

String rootUrl=“F”+"?/"+“plantpictureurl/”;//根目錄，

//上傳

try {

String[] typeImg={“png”,“jpg”};

if(file!=null){
            String origName=file.getOriginalFilename();// 檔案原名稱
            System.out.println("上傳的檔案原名稱:"+origName);
                    //存放圖檔檔案的路徑
                    String fileSrc="";
                    try{
                        File uploadedFile = new File(rootUrl+"//"+origName);
                        System.out.println("upload==="+rootUrl);
                        OutputStream os = new FileOutputStream(uploadedFile);
                        InputStream is =file.getInputStream();
                        byte buf[] = new byte[1024];//可以修改 1024 以提高讀取速度
                        int length = 0;
                        while( (length = is.read(buf)) > 0 ){
                            os.write(buf, 0, length);
                        }
                        //關閉流
                        os.flush();
                        is.close();
                        os.close();
                        fileSrc=origName+"#";
                        System.out.println("儲存成功！路徑："+rootUrl+"/"+origName);
                    }catch(Exception e){
                        e.printStackTrace();
                    }
                    return fileSrc;
                }
        return null;
    }catch (Exception e) {
        e.printStackTrace();
        return null;
    }
}

}

上傳的一些細節：例如去除預覽縮略圖上面的三個圖檔

實作代碼。

作者：再見北洋園

來源：CSDN

原文：https://blog.csdn.net/zlb_lover/article/details/76548772

扒一扒使用boostrap-fileinput上傳插件遇到的坑，Bootstrap-fileinput上傳插件的使用詳解

繼續閱讀

ElasticJob‐Lite：一次性排程

響應式前端架構Bootstrap系列（15）面闆

響應式前端架構Bootstrap系列（9）導覽列與導航欄

BootStrap響應式開發

關于禁用bootstrap響應式解決方法

bootstrap響應式嵌入元件

響應式前端架構Bootstrap系列（3）段落、文字相關

響應式前端架構Bootstrap系列（20）附加導航（Affix）插件

bootstrap(響應式，進度條，标題欄，字型圖示，分頁等等)

Bootstrap元件之進度條

Metronic V4.5.2 Responsive Admin Dashboard Template build with Twitter Bootstrap 3.3.5

django項目網易雲音樂

spring cloud在bootstrap.properties配置spring.profiles.active無效

Hplus架構動态添加頁籤功能(擴充)

AngularJS ng依賴注入的三種方式

【web素材】01-10款大氣的購物商城網站模闆