最近接到一个需求，需要用户批量上传附件，主要功能要求如下
1： 批量上传文件
2：展示已上传的问题
3：可以删除已上传和待上传的文件
在网上找了半天，终于找到了一个比较符合要求的组件Bootstrap FileInput，在此记录下使用方法，就算做个笔记吧。
源码以及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
1、 下载插件
插件下载地址：https://github.com/kartik-v/bootstrap-fileinput/ 下载后的压缩包解压文件夹内容如下：
534372-20170720101555880-1710584086.png
文件说
js ： 插件核心js代码，引用fileinput.min.js/fileinput.js即可，默认插件语言为英文，如需要中文需要引用js/locales/zh.js(其他语言引用相应的js文件)
js/plugins : 相关辅助插件，piexif.min.js（resize image插件）、sortable.js（初始化预览窗口缩略图排序插件）、purify.js（看说明是净化html代码用的，试了下没有搞明白具体有说明作用）
css ：插件核心css代码，fileinput.min.css/fileinput.css（核心css代码，引用任何一个）、fileinput-rtl.min.css/fileinput-rtl.css(选用这组css，文件选择框会和从右向左排列，即选择文件等相关按钮按钮在左边，文件框在右边)
themes:主题，如需要插件主题样式可引用主题文件夹下的相应js和css文件
查看示例：
打开压缩包中的example/index.html或者访问http://plugins.krajee.com/file-basic-usage-demo查看示例。可根据示例的代码选择需要的控件代码使用。
2、下载依赖
fileinput依赖于bootstrap 和 font-awesome，我们需要把这两个下载下来
bootstrap ：https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js
font-awesome：https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
3、引入相应js和css
注意引入顺序
<link href="../bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="../fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
<link href="../font-awesome/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"/>
<link href="../fileinput/themes/explorer-fa/theme.css" media="all" rel="stylesheet" type="text/css"/>
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../fileinput/js/plugins/sortable.js" type="text/javascript"></script>
<script src="../fileinput/js/fileinput.js" type="text/javascript"></script>
<script src="../fileinput/js/locales/zh.js" type="text/javascript"></script>
<script src="../fileinput/themes/explorer-fa/theme.js" type="text/javascript"></script>
<script src="../fileinput/themes/fa/theme.js"></script>
4、创建上传组件
<div class="file-loading">
<input id="input-ke-2" name="file" type="file" multiple>
</div>
5、定义fileinput
// 上传附件
$("#input-ke-2").fileinput({
language:'zh', // 多语言设置，需要引入local中相应的js，例如locales/zh.js
theme: "explorer-fa", // 主题
uploadUrl: task_file_uplad_url, // 上传地址
minFileCount: 1, // 最小上传数量
maxFileCount: 5, // 最大上传数量
overwriteInitial: false, // 覆盖初始预览内容和标题设置
showCancel:false, // 显示取消按钮
showZoom:false, // 显示预览按钮
showCaption:false, // 显示文件文本框
dropZoneEnabled:false, // 是否可拖拽
uploadLabel:"上传附件", // 上传按钮内容
browseLabel: '选择附件', // 浏览按钮内容
showRemove:false, // 显示移除按钮
browseClass:"layui-btn", // 浏览按钮样式
uploadClass:"layui-btn", // 上传按钮样式
uploadExtraData: {'taskId':taskId,'createBy':userId,'createByname':username}, // 上传数据
hideThumbnailContent:true, // 是否隐藏文件内容
fileActionSettings: { // 在预览窗口中为新选择的文件缩略图设置文件操作的对象配置
showRemove: true, // 显示删除按钮
showUpload: true, // 显示上传按钮
showDownload: false, // 显示下载按钮
showZoom: false, // 显示预览按钮
showDrag: false, // 显示拖拽
removeIcon: '<i class="fa fa-trash"></i>', // 删除图标
uploadIcon: '<i class="fa fa-upload"></i>', // 上传图标
uploadRetryIcon: '<i class="fa fa-repeat"></i>' // 重试图标
},
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);
});
6、效果如图
1539243697258.png
网友评论