Bootstrap-fileinput文件上傳組件

中文API介紹：https://segmentfault.com/a/1190000018477200

介紹一下簡單的使用，首先引入一些資源

    <link href="${pageContext.request.contextPath}/bootstrap-fileinput/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/bootstrap-fileinput/bootstrap-fileinput-master/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
    <%--<link href="${pageContext.request.contextPath}/bootstrap-fileinput/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"/>--%>    
    <link href="${pageContext.request.contextPath}/bootstrap-fileinput/bootstrap-fileinput-master/themes/explorer-fa/theme.css" media="all" rel="stylesheet" type="text/css"/>

<script src="${pageContext.request.contextPath}/bootstrap-fileinput/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap-fileinput/bootstrap-fileinput-master/js/plugins/sortable.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/bootstrap-fileinput/bootstrap-fileinput-master/js/fileinput.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/bootstrap-fileinput/bootstrap-fileinput-master/js/locales/zh.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/bootstrap-fileinput/bootstrap-fileinput-master/themes/explorer-fa/theme.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/bootstrap-fileinput/bootstrap-fileinput-master/themes/fa/theme.js"></script>

如上所示，需要fileinput、bootstrap和jQuery的資源，需要分別下載三次，測試時bootstrap和jQuery的可以使用CDN

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
<!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

接下來是輸入部分：

    <input id="input-ke-2" name="photo" type="file" multiple>
    <script>
        // 上傳附件
        let task_file_delete_url = "${pageContext.request.contextPath}/upload1.action";
        $("#input-ke-2").fileinput({
            language:'zh',                                          // 多語言設置，需要引入local中相應的js，例如locales/zh.js
            dropZoneTitle: '可以將圖片拖放到這里 …支持多文件上傳',
            theme: "explorer-fa",                               // 主題
            uploadUrl: task_file_delete_url,         // 上傳地址
            minFileCount: 1,                                        // 最小上傳數量
            maxFileCount: 5,                                        // 最大上傳數量
            overwriteInitial: false,                        // 覆蓋初始預覽內容和標題設置
            showCancel:false,                                       // 顯示取消按鈕
            showZoom:false,                                         // 顯示預覽按鈕
            showCaption:false,                                  // 顯示文件文本框
            dropZoneEnabled:true,                          // 是否可拖拽
            uploadLabel:"上傳附件",                         // 上傳按鈕內容
            browseLabel: '選擇附件',                            // 瀏覽按鈕內容
            showRemove:false,                                       // 顯示移除按鈕
            browseClass:"btn btn-primary",                        // 瀏覽按鈕樣式
            uploadClass:"btn btn-primary",                        // 上傳按鈕樣式
            // uploadExtraData: {'taskId':1,'createBy':1,'createByname':1},   // 上傳數據
            hideThumbnailContent:false,                  // 是否隱藏文件內容
            fileActionSettings: {                               // 在預覽窗口中為新選擇的文件縮略圖設置文件操作的對象配置
                showRemove: false,                                   // 顯示刪除按鈕
                showUpload: true,                                   // 顯示上傳按鈕
                showDownload: false,                            // 顯示下載按鈕
                showZoom: false,                                    // 顯示預覽按鈕
                showDrag: false,                                        // 顯示拖拽
                removeIcon: '<span>X</span>',   // 刪除圖標
                uploadIcon: '<span>↑</span>',     // 上傳圖標
                uploadRetryIcon: '<span>☇</span>'  // 重試圖標
            }


          /*  ,

            initialPreview: [                                                                   //初始預覽內容
                "https://picsum.photos/1920/1080?image=101",
                "https://picsum.photos/1920/1080?image=102",
                "https://picsum.photos/1920/1080?image=103"
            ],
            initialPreviewConfig: [                                                     // 初始預覽配置 caption 標題，size文件大小 ，url 刪除地址，key刪除時會傳這個
                {caption: "picture-1.jpg", size: 329892, width: "120px", url: task_file_delete_url, key: 101},
                {caption: "picture-2.jpg", size: 872378, width: "120px", url: task_file_delete_url, key: 102},
                {caption: "picture-3.jpg", size: 632762, width: "120px", url: task_file_delete_url, key: 103}
            ]*/
        });
        // 上傳成功回調
        $("#input-ke-2").on("filebatchuploadcomplete", function() {
            // layer.msg("上傳附件成功");
            // setTimeout("closeUpladLayer()",2000)
        });
        // 上傳失敗回調
        $('#input-ke-2').on('fileerror', function(event, data, msg) {
            // layer.msg(data.msg);
            // tokenTimeOut(data);
        });
    </script>

這只是常用的部分，還有更多詳見官網。

效果圖：

源碼以及API地址：

bootstrap-fileinput源碼：https://github.com/kartik-v/bootstrap-fileinput

bootstrap-fileinput在線API：http://plugins.krajee.com/file-input

bootstrap-fileinput Demo展示：http://plugins.krajee.com/file-basic-usage-demo

 

參考鏈接：https://www.jianshu.com/p/15e72207a461?tdsourcetag=s_pcqq_aiomsg

　　　　　https://segmentfault.com/a/1190000018477200