fileinput事件

本篇表格列举BootStrap的上传插件fileinput的部分事件，为了便于自己开发使用。官网地址

方法名	描述	范例
fileerror	异步上传失败结果处理,当上传文件客户端验证错误时，会触发此事件。它允许传入对象data作为参数。data：包含下面关键字的对象/关联数组：id：预览缩略图标识符id（如果不可用，则为undefined）；index：文件索引或者预览缩略图索引（如果不可用，则为undefined），file：文件对象（如果不可用，则为undefined），reader：文件读取器实例（如果不可用，则为undefined），files：文件堆数组（如果不可用，则为undefined）。msg：字符串，生成的错误信息	$(’#input-id’).on(‘fileerror’, function(event, data, msg) { console.log(data.id);console.log(data.index);console.log(data.file);console.log(data.reader);console.log(data.files);// 获取信息alert(msg);});
fileuploaded	此事件仅在ajax上传且上载每个缩略图文件之后触发。此事件只有是AJAX上传并在以下场景才会触发：当单击每个预览缩略图中的上传图标并且文件上传成功时，或者当你将uploadAsync设置为true并且已触发批量上传时。在这种情况下，fileuploaded事件在每个单独的选定文件成功上传之后被触发。即异步上传成功结果处理。	$(’#input-id’).on(‘fileuploaded’, function(event, data, previewId, index) {var form = data.form, files = data.files, extra = data.extra,response = data.response, reader = data.reader;console.log(‘File uploaded triggered’);});
filebatchuploaderror	此事件仅在ajax上传时触发，并且同步批量上传面临上传验证错误之后。此事件仅针对ajax上传并在以下情况下触发：当您将uploadAsync设置为false并且已触发批量上传时。在这种情况下，在任何文件面临上载错误或者你通过服务器操作JSON响应返回错误后触发filebatchuploaderror事件。即同步上传错误结果处理。	$(’#input-id’).on(‘filebatchuploaderror’, function(event, data, msg) {var form = data.form, files = data.files, extra = data.extra,response = data.response, reader = data.reader;console.log(‘File batch upload error’); // 获取信息 alert(msg);});
filebatchuploadsuccess	此事件仅在ajax上传且文件批量上传成功之后触发。此事件只有是AJAX上传并在以下场景才会触发：当你将uploadAsync设置为false并且已经触发了批量上传时。在这种情况下，在所以文件成功上传后会触发filebatchuploadsuccess事件即同步上传成功结果处理。。	$(’#input-id’).on(‘filebatchuploadsuccess’, function(event, data, previewId, index) {var form = data.form, files = data.files, extra = data.extra,response = data.response, reader = data.reader;console.log(‘File batch upload success’);});
filebatchselected	在预览中选择并显示一批文件后触发此事件。附加参数有：files：文件对象实例（如果FileReader不可用，则为空对象）	$(’#input-id’).on(‘filebatchselected’, function(event, files) {console.log(‘File batch selected triggered’);});
upload	文件上传方法	$("#input-id").fileinput(“upload”);
filebatchuploadcomplete	所有文件上传成功后执行，执行时机在fileuploaded后,此事件仅对于ajax上传且完成同步或异步ajax批量上传后触发。附加参数有：files：数组，文件栈数组（如果不可用，则为空对象）。extra：该插件的uploadExtraData设置（如果不可用，则为空对象）。	$(’#input-id’).on(‘filebatchuploadcomplete’, function(event, files, extra) {console.log(‘File batch upload complete’);});
filepredelete	在删除initialPreview内容集中的每个缩略图文件之前触发此事件。附加参数有：key：要删除的已选文件在initialPreviewConfig中传入的关键字。jqXHR：用于此事务的jQuery XMLHttpRequest对象（如果可用）。data：输出deleteExtraData对象。	$(’#input-id’).on(‘filepredelete’, function(event, key) { console.log('Key = ’ + key);});
filesuccessremove	使用缩略图删除按钮删除成功上传的缩略图后，会触发此事件。当showUploadedThumbs设置为true时，这通常是适用的。附加参数有：id：缩略图HTML容器节点的id属性。	$(’#input-id’).on(‘filesuccessremove’, function(event, id) {if (some_processing_function(id)) {console.log(‘Uploaded thumbnail successfully removed’); } else {return false; // 缩略图删除中断}});

fileinput事件相关推荐

python bootstrap-fileinput示例_bootstrap-fileinput详细说明与使用
javascript 技术文章开发 bootstrap-fileinput详细说明与使用介绍 bootstrap-fileinput是一款非常优秀的HTML5文件上传插件,支持文件预览.多文件上传 ...
JavaScrpit 犀牛书第七版笔记
JavaScrpit 犀牛书第七版笔记挖个坑吧,JavaScript 犀牛书英文的第七版(JavaScript: The Definitive Guide, 7th Edition)其实在去年(20 ...
解决上传文件或图片时选择相同文件无法触发change事件的问题
昨天在做一个上传文件的模块时遇到了这样的问题:打开文件一上传,上传成功后再次点击文件一,change事件无反应 <input type="file" name="f ...
【Bootstrap-插件使用】Jcrop+fileinput组合实现头像上传功能
作者:Dreawer 链接:https://zhuanlan.zhihu.com/p/24465742 来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 作者:梦游的龙 ...
python bootstrap-fileinput示例_bootstrap fileinput完整实例分享
本篇介绍如何使用bootstrap fileinput.js,file input插件功能如此强大,样式非常美观,并且支持上传文件预览,ajax同步或异步上传,拖曳文件上传等炫酷的功能,最好用的文件上 ...
php多图上传插件ios,yii2组件之多图上传插件FileInput的详细使用
作者:白狼出处:http://www.manks.top/yii2_multiply_images.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连 ...
fileinput 时间_JavaScript_Bootstrap Fileinput文件上传组件用法详解，最近时间空余，总结了一些关...
最近时间空余,总结了一些关于bootstrap fileinput组件的一些常见用法,特此分享到phpstudy平台,供大家参考,同时也方便以后的查找.本文写的不好还请见谅. 一.效果展示 1.原始的 ...
Bootstrap+PHP fileinput 实现多图上传这是ajax上传，只能单张单张图片地上传
插件及源代码可以在这里下载 http://www.jq22.com/jquery-info5231 下面是根据下载的demo进行补充: 使用bootstrap界面美观,可预览,可拖拽上传,可配合aja ...
bootstrap+fileinput插件实现可预览上传照片功能
图片.png 实际项目中运用: 图片.png 功能:实现上传图片,更改上传图片,移除图片的功能 <!DOCTYPE html> <html><head><me ...

fileinput事件

fileinput事件相关推荐

最新文章

热门文章