<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: , //表示允许同时上传的最大文件个数
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参数的更多相关文章

  1. JS组件系列——Bootstrap文件上传组件:bootstrap fileinput

    前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签, ...

  2. 结合bootstrap fileinput插件和Bootstrap-table表格插件,实现文件上传、预览、提交的导入Excel数据操作流程

    1.bootstrap-fileinpu的简单介绍 在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用, ...

  3. bootstrap fileinput 使用记录

    第一次使用bootstrap fileinput碰到了许多坑,做下记录 需求 本次使用bootstrap fileinput文件上传组件,主要用来上传和预览图片.作为一个后台管理功能,为某个表的某个字 ...

  4. 关于Bootstrap fileinput 上传新文件,移除时触发服务器同步删除的配置

    在Bootstrap fileinput中移除预览文件时可以通过配置initialPreviewConfig: [ { url:'deletefile',key:fileid } ] 来同步删除服务器 ...

  5. JS文件上传神器bootstrap fileinput详解

    Bootstrap FileInput插件功能如此强大,完全没有理由不去使用,但是国内很少能找到本插件完整的使用方法,于是本人去其官网翻译了一下英文说明文档放在这里供英文不好的同学勉强查阅.另外附上一 ...

  6. bootstrap fileinput插件使用感悟

    bootstrap fileinput 的填坑感悟              这个插件在demo的网站地址http://plugins.krajee.com/file-preview-icons-de ...

  7. bootstrap fileinput 文件上传

    最近因为项目需要研究了下bootstrap fileinput的使用,来记录下这几天的使用心得吧. 前台html页面的代码 <form role="form" id=&quo ...

  8. Bootstrap FileInput中文API整理

    这段时间做项目用到bootstrap fileinput插件上传文件,在用的过程中,网上能查到的api都不是很全,所以想着整理一份比较详细的文档,方便自己今后使用,也希望能给大家带来帮助,如有错误,希 ...

  9. Bootstrap FileInput中文API文档

    Bootstrap FileInput中文API整理 这段时间做项目用到bootstrap fileinput插件上传文件,在用的过程中,网上能查到的api都不是很全,所以想着整理一份比较详细的文档, ...

  10. Bootstrap文件上传组件:bootstrap fileinput

    为了上传预览pdf与图片特用此插件. 源码以及API地址: bootstrap-fileinput源码:https://github.com/kartik-v/bootstrap-fileinput ...

随机推荐

  1. lfs原理

  2. Selenium辅助工具

    下载Firefox39.0版本浏览器,安装firebug和FirePath.最新版的Firefox在扩展组件中无法找到firebug,可以使用旧的版本的Firefox浏览器. FirePath插件的使 ...

  3. Redhat7无法启动mysql

    是这样的,7的这个环境安装了叫MariaDB了 安装MariaDB之后必须先启动MariaDB [root@redhatx ~]# yum -y install mysql [root@redhatx ...

  4. Django权限控制进阶

    一.一级菜单的排序 我们用字典存放菜单信息,而字典是无序的,当一级菜单过多时可能会出现乱序情况,因此需要给一级菜单排序 1.给一级菜单表的model中加一个weight权重的字段 ,权重越大越靠前 w ...

  5. 深度剖析MQTT协议的整个通信流程

    http://www.elecfans.com/d/587483.html MQTT,目前物联网的最主要的协议,基本所有收费的云平台都是基于MQTT协议,比如机智云,和所有的开放云平台比如中国移动的o ...

  6. php tp5常用小知识

    1. tp5 获取当前访问的模块名,控制器名,方法名 $request= \think\Request::instance(); $module = $request->module(); // ...

  7. YY的GCD 数学

    题目描述 神犇YY虐完数论后给傻×kAc出了一题 给定N, M,求1<=x<=N, 1<=y<=M且gcd(x, y)为质数的(x, y)有多少对 kAc这种傻×必然不会了,于 ...

  8. QDU_CEF(补)

    C - Arthur and Table Arthur has bought a beautiful big table into his new flat. When he came home, A ...

  9. Python-is, ==, cmp()

    is 主要是判断 2 个变量是否引用的是同一个对象,如果是的话,则返回 true,否则返回 false. 判断数字相等不要用 is 操作符 1 2 3 4 5 6 7 8 9 10 11 12 > ...

  10. bzoj1041 圆上的整点 数学

    题目传送门 题目大意:求一个给定的圆(x^2+y^2=r^2),在圆周上有多少个点的坐标是整数. 思路:没思路,看大佬的博客(转载自https://blog.csdn.net/csyzcyj),转载只 ...