fileinput 时间_BootStrap Fileinput的使用教程
bootstrap-fileinput是基于bootstrap的上传控件,此控件网上有很多例子。我照着例子做后发现请求无法提交到后台,反复测试后发现,不能禁止预览(showPreview要设置为true),禁止预览后fileuploaded则无法响应(实际情况是showPreview=false时, 即便是uploadAsync=true, 也是filebatchuploadsuccess响应返回结果。如果showPreview=true, uploadAsync=true, 才是fileuploaded响应返回结果)。
注意:
如果出现$("#xxxx").fileinput({}); 不生效的情况请将fileinput.js中最后几行注释掉:
/* $(document).ready(function () {
var $input = $('input.file[type=file]'), count = $input.attr('type') ? $input.length : 0;
if (count > 0) {
$input.fileinput();
}
}); */
$("#uploadfile").fileinput({
language: 'zh', //设置语言
uploadUrl: "http://127.0.0.1/testDemo/fileupload/upload.do", //上传的地址
allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
//uploadExtraData:{"id": 1, "fileName":'123.mp3'},
uploadAsync: true, //默认异步上传
showUpload: true, //是否显示上传按钮
showRemove : true, //显示移除按钮
showPreview : true, //是否显示预览
showCaption: false,//是否显示标题
browseClass: "btn btn-primary", //按钮样式
dropZoneEnabled: false,//是否显示拖拽区域
//minImageWidth: 50, //图片的最小宽度
//minImageHeight: 50,//图片的最小高度
//maxImageWidth: 1000,//图片的最大宽度
//maxImageHeight: 1000,//图片的最大高度
//maxFileSize: 0,//单位为kb,如果为0表示不限制文件大小
//minFileCount: 0,
maxFileCount: 10, //表示允许同时上传的最大文件个数
enctype: 'multipart/form-data',
validateInitialCount:true,
previewFileIcon: "",
msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!",
});
//异步上传返回结果处理
$('#uploadfile').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);
// get message
alert(msg);
});
//异步上传返回结果处理
$("#uploadfile").on("fileuploaded", function (event, data, previewId, index) {
console.log(data.id);
console.log(data.index);
console.log(data.file);
console.log(data.reader);
console.log(data.files);
var obj = data.response;
alert(JSON.stringify(data.success));
});
//同步上传错误处理
$('#uploadfile').on('filebatchuploaderror', function(event, data, msg) {
console.log(data.id);
console.log(data.index);
console.log(data.file);
console.log(data.reader);
console.log(data.files);
// get message
alert(msg);
});
//同步上传返回结果处理
$("#uploadfile").on("filebatchuploadsuccess", function (event, data, previewId, index) {
console.log(data.id);
console.log(data.index);
console.log(data.file);
console.log(data.reader);
console.log(data.files);
var obj = data.response;
alert(JSON.stringify(data.success));
});
//上传前
$('#uploadfile').on('filepreupload', function(event, data, previewId, index) {
var form = data.form, files = data.files, extra = data.extra,
response = data.response, reader = data.reader;
console.log('File pre upload triggered');
});
经查资料得知,异步上传处理错误和返回结果要处理fileerror和fileuploaded方法;同步上传处理错误和返回结果filebatchuploaderror和filebatchuploadsuccess方法
以上所述是小编给大家介绍的BootStrap Fileinput的使用教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
fileinput 时间_BootStrap Fileinput的使用教程相关推荐
- fileinput 时间_JavaScript_Bootstrap Fileinput文件上传组件用法详解,最近时间空余,总结了一些关...
最近时间空余,总结了一些关于bootstrap fileinput组件的一些常见用法,特此分享到phpstudy平台,供大家参考,同时也方便以后的查找.本文写的不好还请见谅. 一.效果展示 1.原始的 ...
- fileinput 时间_Bootstrap的fileinput插件实现多文件上传的方法
*1.bootstrap-fileinput 插件git下载地址 2.解决使用bootstrap-fileinput得到返回值 上传图片 $("#file-0a").fileinp ...
- fileinput 时间_bootstrap-fileinput使用手册
一.准备 1.插件下载地址:https://github.com/kartik-v/bootstrap-fileinput/ 下载后的压缩包解压文件夹内容如下: js:插件核心js代码,引用filei ...
- python bootstrap-fileinput示例_bootstrap fileinput完整实例分享
本篇介绍如何使用bootstrap fileinput.js,file input插件功能如此强大,样式非常美观,并且支持上传文件预览,ajax同步或异步上传,拖曳文件上传等炫酷的功能,最好用的文件上 ...
- fileinput 时间_在使用vue时候使用bootstrap-fileinput
bootstrap-fileinput这个控件不错,首先感谢这个控件的作者 在使用vue的时候当然是不太愿意再回到原始的dom操作时代$(...)之类写一大堆整个项目中完全重复的默认配置. 我希望简单 ...
- jqueryui时间插件_jQueryUI菜单插件教程示例
jqueryui时间插件 Earlier we looked at different plugins provided by jQueryUI. In this post, we will see ...
- 独家 | 使用Gephi设置动态图形动画——在社会网络图中动画化时间动态行为的数据可视化教程...
作者:Haaya Naushan 翻译:车前子 校对:欧阳锦 本文约3300字,建议阅读7分钟 Gephi可视化Twitter网红的转发行为随时间的变化. 谈到分析社交网络,我之前的文章主要是关于自然 ...
- win2k 修改时间服务器,Win2K服务器端设置教程 第四节 WWW服务器的设置(上)
第四节 IIS之WWW服务器的设置(上) 一.IIS概述 IIS是Internet信息服务(Internet Infomation Server)的缩写.它是一种Web服务,主要包括WWW服务器.FT ...
- linux时间界面返回,Android开发教程:游戏过程中按Home键后返回游戏界面
症状:游戏过程中,按下Home键返回手机主菜单,再点击游戏图标试图返回游戏的时候屏幕黑的一片! 以前一直没在意只有结束线程在运行游戏,今天觉得改仔细琢磨一下这个问题了! 首先第一件事:打印Logo看看 ...
最新文章
- 吴恩达老师深度学习视频课笔记:逻辑回归公式推导及C++实现
- c语言课件 文件,C语言课件--文件.ppt
- java中一级缓存_java – 集群环境中的hibernate一级缓存
- 身边朋友财富自由的故事
- python读usb_使用Python来操作Microchip安全芯片
- 【计算方法】数值积分
- 电脑如何通过USB连接PPC手机上网
- 指定目录下创建TXT文件
- ROS端口映射这样才正确
- QuickTime不支持播放HEVC编码mp4/mov视频
- Unity 3D光源-Directional平行光/逆光效果,光晕详解、教程
- 【仿真】后仿真中的notifier是奏啥滴!
- QQ浏览器X5内核问题汇总
- uniapp全局数据(全局url、全局openId)
- 欢迎Fork我们的开源云手机项目--OPENVMI(Virtual Mobile Infrastructure)(VMI)
- PX4 Autopilot源码分析 - 总体架构
- pacman常见问题笔记
- ImportError: TensorBoard logging requires TensorBoard version 1.15 or above 问题解决
- mysql练习-学生信息管理系统
- 桁架机器人立柱_麻城大型桁架式机械手,桁架式机器人结构