<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. MVC进阶篇(二)—路由机制

    前言 这个东西好像,一般也不经常动,都用默认的即可.由于MVC模式在framework里面的解析机制,区别与webform模式,是采用解析路由机制的url.从来实例化视图列对象,然后对该action进 ...

  2. Jmeter_Beanshell_使用Java处理JSON块

    版权声明:本文为博主原创文章,转载请注明出处. [环境] ①Jmeter版本:3.2,JDK:1.8 ②前置条件:将json.jar包置于..\apache-jmeter-3.2\lib\下,并将该j ...

  3. django 部署到Ubuntu-apache2遇到的问题汇总

    1.x86_64-linux-gnu-gcc: error: unrecognized command line option ‘-fstack-protector-strong’ Turns out ...

  4. 【洛谷2113】看球泡妹子 DP背包

    看球泡妹子 题目背景 2014年巴西世界杯开幕了,现在满城皆是世界杯,商家们利用它大赚一笔,小明和小红也借此机会增进感情. 题目描述 本届世界杯共有\(N\)支球队,\(M\)场比赛.男球迷小明喜欢看 ...

  5. Leetcode 413. Arithmetic Slice 算术序列切片(动态规划,暴力)

    Leetcode 413. Arithmetic Slice 算术序列切片(动态规划,暴力) 题目描述 如果一个数组1.至少三个元素2.两两之间差值相同,那么这个数组就是算术序列 比如下面的数组都是算 ...

  6. 从图片中提取html格式的布局

    制作界面的自动化 意义:对于程序设计人员来说,比较痛苦的是制作界面.从设计人员发送的稿件(通常为jpg格式),到完成html的布局,需要将图像转化为div标记,自动化这一过程十分有意义 1.设计一个工 ...

  7. pycharm中设置工程

    1.设置pycharm多工程以及工程的依赖关系: a.在打开工程时候,选中add current open projects(添加到项目中),   b.设置(settings)->project ...

  8. wpa_supplicant

    一 函数接口介绍 wpa_ctrl_open接口用来打开wpa_supplicant的控制接口,在UNIX系统里使用UNIX domain sockets,而在Windows里则是使用UDP sock ...

  9. python学习之路---day09

    函数案例: return 可以终止函数后面的调用 def abc() print("1") print("2") print("3") pr ...

  10. (转)一条SQL更新语句是如何执行的

    名词 MySQL 里经常说到的 WAL 技术,Write-Ahead Logging 第一个日志模块 redo log 也叫日志重写,是InnoDB 引擎特有的日志 - write pos and c ...