1. 程式人生 > >bootstrap fileinput 外掛的使用

bootstrap fileinput 外掛的使用

js部分
fileuploaded方法是上傳成功

  fileerror上傳失敗的回掉

使用bootstrap fileinput 需要初始化

$(function () {
      
        //初始化檔案上傳
        var uploadUrl=baseURL+"company/oss/upload";
        initFileInput("fish_file",uploadUrl);
      
}
)
function initFileInput(ctrlName,URL) {
    var control = $('#' + ctrlName);
    control.fileinput({
        language: 'zh', //設定語言
        uploadUrl: URL, //上傳的地址
        allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的檔案字尾
        //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
        uploadAsync: true, //預設非同步上傳
        showUpload: false, //是否顯示上傳按鈕
        showRemove : true, //顯示移除按鈕
        showPreview : true, //是否顯示預覽
        showCaption: false,//是否顯示標題
        browseClass: "btn btn-primary", //按鈕樣式
        dropZoneEnabled: false,//是否顯示拖拽區域
        //minImageWidth: 50, //圖片的最小寬度
        //minImageHeight: 50,//圖片的最小高度
        //maxImageWidth: 1000,//圖片的最大寬度
        //maxImageHeight: 1000,//圖片的最大高度
        //maxFileSize: 0,//單位為kb,如果為0表示不限制檔案大小
        //minFileCount: 0,
        //maxFileCount: 10, //表示允許同時上傳的最大檔案個數
        enctype: 'multipart/form-data',
        validateInitialCount:true,
        uploadExtraData:{},
        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
        msgFilesTooMany: "選擇上傳的檔案數量({n}) 超過允許的最大數值{m}!",
    }).on("fileuploaded", function (event, data, previewId, index) {    //一個檔案上傳成功
        console.log('檔案上傳成功!');
        // data.response.imgurl
        imgurl= data.response.imgurl;
    }).on('fileerror', function(event, data, msg) {  //一個檔案上傳失敗
        console.log('檔案上傳失敗!'+data.id);
    })
}
html部分 這裡有還要bootsrap的js和css沒有加上
css,js下載地址連結: https://pan.baidu.com/s/1ghKRgWz8BbypncGXPvDnpA 提取碼: n5c8 
<div class="form-group">
        <input id="fish_file" name="fish_file" type="file" multiple
               class="file"  data-show-upload="false" data-show-caption="true">
    </div>



<script src="${request.contextPath}/statics/js/modules/company/buildingMap.js"></script>
<link href="${request.contextPath}/statics/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
<script src="${request.contextPath}/statics/libs/fileinput.js" type="text/javascript"></script>
<script src="${request.contextPath}/statics/libs/fileinput_locale_zh.js" type="text/javascript"></script>