fileinput使用
1.引入必要的js/css
<script th:src="@{/ajax/libs/bootstrap-fileinput/fileinput.min.js}"></script>
<link th:href="@{/ajax/libs/bootstrap-fileinput/fileinput.min.css}" rel="stylesheet"/>
除了fileinput.min.css和fileinput.min.js外,你必须要加载jquery.min.js和bootstrap.min.css。可选择加入fa.js主题文件来使用 font awesome 图标样式。可选择加入 语言.js,可以把插件翻译成你的语言。
2. 初始化插件
2.1 html加入标签
<input id="files" name="files" type="file" accept="image/jpg,image/png,image/jpeg,image/gif,image/bmp" multiple="multiple">
2.2 js初始化上传文件标签
后台返回的数据在data.response中
$(document).ready(function () {$("#files").fileinput({language: 'zh', //设置语言'theme': 'explorer-fas','uploadUrl': '#',overwriteInitial: false,initialPreviewAsData: true,allowedFileExtensions: ['jpg', 'png', 'jpeg','gif','bmp'],//接收的文件后缀maxFileSize: 3*1024, //文件的最大3MmaxFileCount: 20, //上传文件的最大数量enctype: 'multipart/form-data',showUpload: true, //是否显示上传按钮// uploadAsync: true , //是否异步上传 默认为true uploadExtraData: function() { //额外参数的关键点var data={groupId:$('#groupId option:selected').val()};return data;},}).on('filebatchpreupload', function(event, data) { //该方法将在上传之前触发// $.modal.msgWarning('请选择图片分组')// var groupId=$("#groupId").val();// if(groupId.length==0){// return {// message: "请选择图片分组", // 验证错误信息在上传前要显示。如果设置了这个设置,插件会在调用时自动中止上传,并将其显示为错误消息。您可以使用此属性来读取文件并执行自己的自定义验证// data:{} // any other data to send that can be referred in `filecustomerror`// };// }}).on('fileuploaded', function(event, data, msg) {//异步上传成功结果处理// console.log("response,ok---"+JSON.parse(data.response)); // Uncaught SyntaxError: Unexpected token o in JSON at position 1console.log("response,ok---"+JSON.stringify(data.response.msgDetail));}).on('fileerror', function(event, data, msg) {//异步上传失败结果处理console.log("response,error---"+JSON.stringify(data.response.msgDetail));// $("#files").fileinput('refresh'); //刷新组件})
3 Ajax上传
3.1 异步上传
这是默认模式,也就是说uploadAsync属性设置为true。当上传多个文件时,异步模式允许触发并行调用服务器方法接受每个上传文件。您可以通过设置maxFileCount属性来控制一次允许上传的最大文件数。在异步模式下,预览中每个缩略图的进度被验证和更新。
接收数据(在服务器上)
你设置的服务器方法(uploadUrl)从插件接收以下数据:
文件数据:以与form文件输入非常相似的格式将这些数据发送到服务器。例如,在java中,你可以使用参数@RequestParam("files")MultipartFile[] files
接受文件数据,files是你的input标签的name属性。如果你没有为input标签设置name属性,则它的名称默认为file_data。
*请注意,多个文件上传需要你为input标签设置multiple属性为true。
额外的数据:该插件可以在你请求服务器方法发送附加数据。这可以通过将uploadExtraData设置为键值对关联数组对象来完成。设置uploadExtraData={key:'value'}
注意
在异步模式下,你会经常在处理ajax上传的服务端接收到单个的文件数据。基本上,这个插件对每个上传的文件都会触发并行的ajax调用方法。你需要相应地编写服务器上传逻辑,以便您始终读取和上传单个文件。同样,在下面的发送数据部分中,你必须返回一个initialPreview,它反映收到的单个文件的数据。
发送数据(从服务器)
你的服务器方法(uploadUrl)必须返回一个json编码对象数据。在这种情况下,您可以发送这4个信息。
error:string类型,它是整个批量上传的错误消息,并将帮助插件识别文件上传中的错误。例如,来自服务器的响应像{error: ‘You are not allowed to upload such a file.’}这样。注意:插件将自动验证并显示ajax异常错误。
initialPreview:数组,图像文件列表或任何指向你上传文件的HTML标记。你会经常发送此队列中的一行,因为你在异步方式会一直收到上传的单个文件。如果设置了此属性,插件会在每个文件上传成功后动态地在预览内容中替换文件。这个配置类似于initialPreview选项设置。例如:
initialPreview: ["<img src='/images/desert.jpg' class='file-preview-image' alt='Desert' title='Desert'>",
],
initialPreviewConfig:数组,用于标识initialPreview条目(即initialPreview的一部分)中每个文件标记的属性的配置。你会始终发送这个队列中一行,因为你始终以异步方式收到上传的一个文件。如果设置了此属性,插件会在每个文件上传成功后自动在预览内容中替换文件。这个配置类似于initialPreviewConfig选项设置。例如:initialPreviewConfig :
[ {标题:'desert.jpg' , width:'120px' , url:'http://localhost/avatar/delete' ,//服务器删除操作 关键:100 , extra:{id:100} }
]
initialPreviewThumbTags:数组,每个初始预览缩略图相对应的替换标签对象数组。通过initialPreview设置的初始预览缩略图会读取此配置为替换标签。
/更改缩略图页脚模板
//设置初始预览模板标签
initialPreviewThumbTags :[{'{CUSTOM_TAG_NEW}':'', '{CUSTOM_TAG_INIT}':'<span class = \'custom-css\'>CUSTOM MARKUP</span> '}
];
append:boolean类型,如果你已经在INIT中设置了initialPreview是否将内容插入initialPreview。如果未设置,则默认为true。如果设置false,插件将覆盖initialPreview内容。
重要
你必须从服务器发送有效的JSON响应,否则上传过程将失败。即使您没有遇到任何错误,您至少必须从服务器发送一个空的JSON对象{}。
要捕获并显示验证错误,你的JSON响应数据必须包含该error键,其值将是要显示的错误HTML标记。如上所述那样设置。
你还可以使用JSON响应发送附加的密钥或数据,以便使用诸如fileuploaded此类的事件对高级案例进行处理
3.2 同步上传
在此模式下,uploadAsync属性设置为false。它只会触发一次批量上传到服务器的方法,并将文件以对象数组的方式从客户端发送到服务器。尽管在此模式下,你可以通过设置maxFileCount属性来控制一次允许上传的最大文件数。然而,在同步模式下,进度只会是对于整体水平的一个标量。预览中每个缩略图的进度未被精确计算和更新。但是,该插件为你提供了识别每个文件上传错误的方法。
接收数据
和异步上传数据格式相同
发送数据
在同步模式下,uploadUrl必须发送json编码对象数据作为响应。在这种情况下,你需要发送这5条信息。
error:字符串类型,它是整个批量上传的错误消息,并将帮助插件识别文件上传中的错误。
errorkeys:数组类型,已经出错的文件的键值(接收的文件数据的基于零的索引)。根据这些数据,插件会自动设置缩略图和每个预览文件的错误。
initialPreview: 数组类型,图像文件列表或任何指向你上传文件的HTML标记。如果设置了此属性,插件会在上传成功后自动在预览内容中替换文件。这个配置类似于initialPreview选项设置。
initialPreviewConfig:数组类型,用于标识initialPreview条目中每个文件标记(即作为initialPreview的一部分进行设置)的属性的配置。如果设置了此属性,插件会在上传成功后自动在预览内容中替换文件。这个配置类似于initialPreviewConfig选项设置。
initialPreviewThumbTags:数组类型,对应于每个初始预览缩略图中替换标签的对象数组。通过设置initialPreview的初始预览缩略图将读取此配置以替换标签
append:布尔类型,如果你在初始化时设置了initialPreview,是否将新的内容附加到initialPreview中。如果未设置,则默认为true。如果设置为false,插件将覆盖initialPreview内容。
例如,来自服务器的响应将发送{error: ‘You have faced errors in 4 files.’, errorkeys: [0, 3, 4, 5]}作为响应。注意:插件将自动验证并显示ajax异常错误。
重要
你必须从服务器发送有效的JSON响应,否则上传过程将失败。即使您没有遇到任何错误,您至少必须从服务器发送一个空的JSON对象。
要捕获并显示验证错误,你的JSON响应数据必须包含该error键,其值将是要显示的错误HTML标记。
4 事件(Method说明)
filebatchpreupload可用于上传前的校验
此事件仅对于ajax上传的上传按钮被单击之后且批量上传开始之前才会触发(同步和异步上传)
fileuploaded异步上传成功结果处理
fileuploaded此事件仅针对ajax上传触发,并在每个缩略图文件上传完成后触发。此事件仅针对ajax上传并在以下情况下触发:当点击每个预览缩略图中的上传图标并且文件上传成功时,或者当你有 uploadAsync设置为true您已触发批量上传。在这种情况下,fileuploaded每一个人选择的文件被上传成功后,触发事件。
fileerror异步上传错误结果处理
当上传文件客户端验证错误时,会触发此事件。
filebatchuploadsuccess
此事件仅在ajax上传且文件批量上传成功之后触发
filebatchuploadcomplete
此事件仅对于ajax上传且完成同步或异步ajax批量上传后触发。
使用:
$('#uploadfile').on('fileerror', function(event, data, msg) {});
其他事件参考:http://www.bootstrap-fileinput.com/events.html
5 配置项
常用配置项已经在上面举例中提到,其他配置项参考以下链接
参考:http://www.bootstrap-fileinput.com/events.html
fileinput使用相关推荐
- Python fileinput模块:逐行读取多个文件
前面章节中,我们学会了使用 open() 和 read()(或者 readline().readlines() )组合,来读取单个文件中的数据.但在某些场景中,可能需要读取多个文件的数据,这种情况下, ...
- bootstrap 文件上传fileinput
页面中引入引入:fileinput.js js初始化: <div class="modal-body"><input type="file" ...
- python fileinput_python fileinput模块
fileinput模块可以遍历文本文件的所有行.它的工作方式和readlines很类似,不同点在于,它不是将全部的行读到列表中而是创建了一个xreadlines对象. 下面是fileinput模块中的 ...
- 【Bootstrap-插件使用】Jcrop+fileinput组合实现头像上传功能
作者:Dreawer 链接:https://zhuanlan.zhihu.com/p/24465742 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 作者:梦游的龙 ...
- fileinput 的总结
fileinput组件实战总结 fileinput是一个增强的基于Bootstrap3.x和HTML5的文件上传工具,具备多种格式文件的预览功能, 另外,它包含了基于AJAX的上传,拖拽和撤销文件,可 ...
- python bootstrap-fileinput示例_bootstrap fileinput完整实例分享
本篇介绍如何使用bootstrap fileinput.js,file input插件功能如此强大,样式非常美观,并且支持上传文件预览,ajax同步或异步上传,拖曳文件上传等炫酷的功能,最好用的文件上 ...
- fileinput模块可以循环一个或多个文本文件的内容
fileinput模块可以循环一个或多个文本文件的内容. [默认格式] fileinput.input (files=None, inplace=False, backup='', bufsize=0 ...
- Bootstrap fileinput.js,最好用的文件上传组件
本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存. 一.demo 二.插件引入 <link ty ...
- python fileinput模块next_Python中的fileinput模块的简单实用示例
这几天有这样一个需求,要将用户登陆系统的信息统计出来,做成一个报表.当用户登陆成功的时候,服务器会往日志文件里写一条像下面这种格式的记录:"日期时间@用户名@IP",这样的日志文件 ...
- php多图上传插件ios,yii2组件之多图上传插件FileInput的详细使用
作者:白狼 出处:http://www.manks.top/yii2_multiply_images.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连 ...
最新文章
- Primary VLAN
- 【译】Swift算法俱乐部-查找最大/最小值
- 与微信、APP正面刚?三大运营商联合发布5G消息白皮书
- Flutter开发之爬坑集合(五)
- linux mv命令改名,linux中mv命令使用详解(移动文件或者将文件改名)
- mysql5.7+主从不一致_Mysql5.7安装错误处理与主从同步及!
- Codeforces Round #108 (Div. 2)
- 30 PP配置-生产车间控制-定义计划策略
- python解不定积分_python快速求解不定积分和定积分
- react中创建组件
- JinlinOJ 通化邀请赛 E.GCD and LCM 最大公约数最小公倍数 关系
- split函数 在oracle,oracle的split函数
- elasticsearch6.4.3实现搜索同义词
- 智慧灯杆系统设计架构简介
- java.lang.StringIndexOutOfBoundsException
- 第71天-内网安全-域横向网络传输应用层隧道技术
- gb2312中的英文字母占几个字节?
- 基于STC89C52单片机的密码锁设计与实现
- 小米6无人直播详细教程+工具包
- 蛋白序列 | 基于深度学习的蛋白质序列家族分类