Bootstrap 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: ‘’, // 删除图标
uploadIcon: ‘’, // 上传图标
uploadRetryIcon: ‘’ // 重试图标
},

    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);
});

Bootstrap FileInput相关推荐

Bootstrap fileinput.js，最好用的文件上传组件
本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存. 一.demo 二.插件引入 <link ty ...
bootstrap+fileinput插件实现可预览上传照片功能
图片.png 实际项目中运用: 图片.png 功能:实现上传图片,更改上传图片,移除图片的功能 <!DOCTYPE html> <html><head><me ...
Bootstrap FileInput(文件上传)中文API整理
下载地址.API和DOM地址(英语好的小伙伴可以看看) 下载地址:https://github.com/kartik-v/bootstrap-fileinput API文档 :http://plugi ...
为什么手机上传图片这么慢前端_解决BootStrap Fileinput手机图片上传显示旋转问题_心病_前端开发者...
最近因为项目需要用到了bootstrap fileinput的插件,在使用苹果手机上传图片预览时,发现图片方向和手机本地存储方向不一致问题.后来通过查询资料了解图片具有EXIF(Exchangeabl ...
php 使用上传文件预览插件,bootstrap fileinput插件实现预览上传照片功能方法详解...
本文主要介绍了bootstrap fileinput插件实现预览上传照片功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下,希望能帮助到大家. 效果图如下所示: 具体代码如下: cl ...
SSM框架基于Bootstrap fileinput 实现文件上传功能
SSM框架基于Bootstrap fileinput 实现文件上传功能 pom.xml文件的配置想要实现SSM框架实现多文件上传,必要的jar包必须要在pom.xml文件中引入.如下: <! ...
php 表格导入excel插件,BootStrap Fileinput插件和表格插件相结合实现导入Excel数据的文件上传、预览、提交的步骤...
这篇文章主要介绍了BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传.预览.提交的导入Excel数据操作步骤,需要的朋友可以参考下 bootstrap ...
kingedit 上传php_JS文件上传神器bootstrap fileinput详解
Bootstrap FileInput插件功能如此强大,完全没有理由不去使用,但是国内很少能找到本插件完整的使用方法,于是本人去其官网翻译了一下英文说明文档放在这里供英文不好的同学勉强查阅.另外附上一 ...
fileinput.js php,JS文件上传神器bootstrap fileinput的解析
这篇文章主要介绍了JS文件上传神器Bootstrap FileInput,样式非常美观,并且支持上传文件预览,ajax同步或异步上传,拖曳文件上传等炫酷的功能,具有一定的参考价值,感兴趣的小伙伴们可以 ...
bootstrap fileinput 文件上传和回显
官网下载文件http://plugins.krajee.com/file-input/demo bootstrap fileinput 是基于bootstrap基础上的上传插件,so必要的bootst ...

Bootstrap FileInput

Bootstrap FileInput相关推荐

最新文章

热门文章