Bootstrap-fileinput文件上傳組件

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

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

<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的能夠使用CDNjava

<!-- 新 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>

接下來是輸入部分：jquery

<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>

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

效果圖：github

源碼以及API地址：bootstrap

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

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

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