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 相关文章推荐
JS网络游戏-(模拟城市webgame)提供的一些例子下载
Oct 14 Javascript
js或css实现滚动广告的几种方案
Jan 28 Javascript
JS构建页面的DOM节点结构的实现代码
Dec 09 Javascript
使用js在页面中绘制表格核心代码
Sep 16 Javascript
判定是否原生方法的JS代码
Nov 12 Javascript
JQuery动画animate的stop方法使用详解
May 09 Javascript
Bootstrap Table使用方法详解
Aug 01 Javascript
利用AngularJs实现京东首页轮播图效果
Sep 08 Javascript
Angular.JS学习之依赖注入$injector详析
Oct 20 Javascript
详解微信小程序——自定义圆形进度条
Dec 29 Javascript
react+redux的升级版todoList的实现
Dec 18 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 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
PHP 变量类型的强制转换
2009/10/23 PHP
使用php get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
js jquery做的图片连续滚动代码
2008/01/06 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
2012/07/15 Javascript
JQuery之focus函数使用介绍
2013/08/20 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
jQuery之字体大小的设置方法
2014/02/27 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
2015/09/25 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
2015/11/24 Javascript
一系列Bootstrap导航条使用方法分享
2016/04/29 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
es6数组includes()用法实例分析
2020/04/18 Javascript
[02:01]2018完美盛典-开场舞《双子星》
2018/12/16 DOTA
python查询mysql中文乱码问题
2014/11/09 Python
python实现创建新列表和新字典,并使元素及键值对全部变成小写
2019/01/15 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
解决python文件双击运行秒退的问题
2019/06/24 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
用python写测试数据文件过程解析
2019/09/25 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
电子商务专业学生的自我鉴定
2013/11/28 职场文书
石油大学毕业生自荐信
2014/01/28 职场文书
审计专业自荐信范文
2014/04/21 职场文书
班级学雷锋活动总结
2014/06/26 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
2019年个人工作总结范文(3篇)
2019/08/27 职场文书
jackson json序列化实现首字母大写,第二个字母需小写
2021/06/29 Java/Android