BootStrap Fileinput初始化时的一些参数


Posted in Javascript onDecember 30, 2016

bootstrap-fileinput是一款基于Bootstrap 3.x的HTML5文件上传插件。该文件上传插件带有预览图效果,可同时选择多个文件。

该插件使用bootstrap CSS3样式来制作文件上传界面,美观大方。并且它提供了多国语言,你可以选择使用中文。

该文件上传插件比普通的文件上传插件功能更强大,它可以对图片、文本文件、HTML文件、视频文件、音频文件、flash文件生成预览图。另外,它还可以基于AJAX上传文件,拖拽上传文件,查看上传进度,可以选择性的预览,添加或删除文件。

例子:

<link rel="stylesheet" href="css/bootstrapCSS/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrapCSS/fileinput.css" />
<div>
<input type="file" name="uploadfile" id="uploadfile" multiple class="file-loading" />
</div>
<script type="text/JavaScript" src="js/jQuery.min.js"></script>
<script type="text/javascript" src="js/bootstrap/fileinput.js"></script>
<script type="text/javascript" src="js/bootstrap/fileinput_locale_zh.js"></script>//汉化
<script type="text/javascript" src="js/bootstrap/bootstrap.min.js"></script>
$("#uploadfile").fileinput({
 language: 'zh', //设置语言
 uploadUrl: "./list.json", //上传的地址(访问接口地址)
 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表示不限制文件大小
 maxFileCount: 10, //表示允许同时上传的最大文件个数
 enctype: 'multipart/form-data',
 validateInitialCount:true,
 previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
 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');
});
</script>

以上所述是小编给大家介绍的BootStrap Fileinput初始化时的一些参数,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
Jul 13 Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
JS实现的简单图片切换功能示例【测试可用】
Feb 14 Javascript
利用node.js实现自动生成前端项目组件的方法详解
Jul 12 Javascript
JavaScript解析任意形式的json树型结构展示
Jul 23 Javascript
5分钟学会Vue动画效果(小结)
Jul 21 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
Sep 01 Javascript
react用Redux中央仓库实现一个todolist
Sep 29 Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 Javascript
谈谈JavaScript中的垃圾回收机制
Sep 17 Javascript
从表单校验看JavaScript策略模式的使用详解
Oct 17 Javascript
bootstrapValidator表单验证插件学习
Dec 30 #Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 #Javascript
BootStrap实现轮播图效果(收藏)
Dec 30 #Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 #Javascript
javascript实现简单的可随机变色网页计算器示例
Dec 30 #Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 #Javascript
JS实现改变HTML上文字颜色和内容的方法
Dec 30 #Javascript
You might like
虹吸壶是谁发明的?煮出来的咖啡好喝吗
2021/03/04 冲泡冲煮
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
PHP遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
laravel实现按时间日期进行分组统计方法示例
2019/03/23 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
js 函数的执行环境和作用域链的深入解析
2009/11/01 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
2016/09/17 Javascript
JS 获取HTML标签内的子节点的方法
2016/09/21 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
es6学习笔记之Async函数的使用示例
2017/05/11 Javascript
express+mockjs实现模拟后台数据发送功能
2018/01/07 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
JS字符串去除连续或全部重复字符的实例
2018/03/08 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
在微信小程序中使用mqtt服务的方法
2019/12/13 Javascript
js回调函数仿360开机
2019/12/26 Javascript
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
在mac下查找python包存放路径site-packages的实现方法
2018/11/06 Python
python flask安装和命令详解
2019/04/02 Python
解决yum对python依赖版本问题
2019/07/05 Python
python对象转字典的两种实现方式示例
2019/11/07 Python
python实现网页录音效果
2020/10/26 Python
纯css3制作煽动翅膀的蝴蝶的示例
2018/04/23 HTML / CSS
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
写好自荐信的要点
2013/11/06 职场文书
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
党的群众路线教育实践活动领导班子整改方案
2014/10/25 职场文书
2016年社会主义核心价值观心得体会
2016/01/21 职场文书