bootstrap-fileinput参数
<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参数的更多相关文章
- JS组件系列——Bootstrap文件上传组件:bootstrap fileinput
前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签, ...
- 结合bootstrap fileinput插件和Bootstrap-table表格插件,实现文件上传、预览、提交的导入Excel数据操作流程
1.bootstrap-fileinpu的简单介绍 在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用, ...
- bootstrap fileinput 使用记录
第一次使用bootstrap fileinput碰到了许多坑,做下记录 需求 本次使用bootstrap fileinput文件上传组件,主要用来上传和预览图片.作为一个后台管理功能,为某个表的某个字 ...
- 关于Bootstrap fileinput 上传新文件,移除时触发服务器同步删除的配置
在Bootstrap fileinput中移除预览文件时可以通过配置initialPreviewConfig: [ { url:'deletefile',key:fileid } ] 来同步删除服务器 ...
- JS文件上传神器bootstrap fileinput详解
Bootstrap FileInput插件功能如此强大,完全没有理由不去使用,但是国内很少能找到本插件完整的使用方法,于是本人去其官网翻译了一下英文说明文档放在这里供英文不好的同学勉强查阅.另外附上一 ...
- bootstrap fileinput插件使用感悟
bootstrap fileinput 的填坑感悟 这个插件在demo的网站地址http://plugins.krajee.com/file-preview-icons-de ...
- bootstrap fileinput 文件上传
最近因为项目需要研究了下bootstrap fileinput的使用,来记录下这几天的使用心得吧. 前台html页面的代码 <form role="form" id=&quo ...
- Bootstrap FileInput中文API整理
这段时间做项目用到bootstrap fileinput插件上传文件,在用的过程中,网上能查到的api都不是很全,所以想着整理一份比较详细的文档,方便自己今后使用,也希望能给大家带来帮助,如有错误,希 ...
- Bootstrap FileInput中文API文档
Bootstrap FileInput中文API整理 这段时间做项目用到bootstrap fileinput插件上传文件,在用的过程中,网上能查到的api都不是很全,所以想着整理一份比较详细的文档, ...
- Bootstrap文件上传组件:bootstrap fileinput
为了上传预览pdf与图片特用此插件. 源码以及API地址: bootstrap-fileinput源码:https://github.com/kartik-v/bootstrap-fileinput ...
随机推荐
- 多线程《五》GIL全局解释器锁
一 引子 定义: In CPython, the global interpreter lock, or GIL, is a mutex that prevents multiple native t ...
- Codeforces Round #545 (Div. 2)C(离散化,思维,PAIR排序)
#include<bits/stdc++.h>using namespace std;int a[1007][1007];pair<int,int>p1[1007],p2[10 ...
- 使用itchat监控微信消息,从此不再为撤回烦恼
强大的Itchat itchat是一个开源的微信个人号接口,使用python封装接入微信网页版接口,通过调用itchat来登录微信网页版收发消息. 项目简介 - itchat 掌握itchat之后,只 ...
- python-循环(while循环、for循环)
循环:循环会重复执行循环体里面的代码,python中循环可分为while循环和for循环. break 不管循环有没有完成,立即结束循环 continue 结束本次循环,继续进行下一次循环 一.whi ...
- 单源最短路SPFA算法
$huaji^{233……}$模板:洛谷 P3371 #include<iostream> #include<algorithm> #include<cstdio> ...
- Java面向对象之内部类(匿名内部类)
一.基础概念 匿名内部类:简化书写的内部类.其实匿名内部类就是一个子类对象. 前提:内部类需要继承或者实现外部的类或者接口. 格式:new 父类或者接口(){定义子类的内容} 二.将内部类定义到局部的 ...
- 【SSO单点系列】(6):CAS4.0 单点流程序列图(中文版)以及相关术语解释(TGT、ST、PGT、PT、PGTIOU)
CAS 相关的内容好久没写了,可能下周会继续更新一些内容吧. 在上一篇中的单点流程序列图由于是从官网直接下载来的,上面都是英文,可能有的朋友看不懂,因此修改成中文的. PS:只修改了一个,第二个图明天 ...
- Ping命令简单报错介绍
了解ABC类IP地址:网络.主机.子网.广播. ---------------------------- 学会ping: ping www.baidu.com 网络检测:ping某一主机可以正常启动! ...
- 利用百度翻译API批量翻译文本
有时间再做总结! # coding=utf-8 #authority:bing #2017-7-18 import httplib import md5 import urllib import ur ...
- Python——可变和不可变类型数据
什么是不可变类型? 存储空间保存的数据不允许被修改,这种数据就是不可变类型. 常见的不可变类型有: 数字类型 int, bool, float, complex, long(2.x) 字符串 str ...