1200字范文 > 最好用的文件上传插件 bootstrap fileInput

最好用的文件上传插件 bootstrap fileInput

时间：2021-05-24 23:06:22

Bootstrap FileInput 组件使用

1、下载插件

插件下载地址：/kartik-v/bootstrap-fileinput/ 下载后的压缩包解压文件夹内容如下：

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或者访问/file-basic-usage-demo查看示例。可根据示例的代码选择需要的控件代码使用。

2、下载依赖

fileinput依赖于bootstrap 和 font-awesome，我们需要把这两个下载下来

bootstrap ：/bootstrap/4.0.0-beta/css/bootstrap.min.css

/bootstrap/4.0.0-beta/js/bootstrap.min.js

font-awesome：/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

3、引入相应js和css

注意引入顺序

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.jstheme: "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、效果如图

链接：/p/15e72207a461

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。