bootstrap fileinput api
一、 引入文件
<link href="../css/bootstrap.min.css"rel="stylesheet">
<link href="../css/fileinput.css" media="all"rel="stylesheet" type="text/css" />
<scriptsrc="../js/jQuery-2.0.3.min.js"></script>
<script src="../js/fileinput.js"type="text/JavaScript"></script>
<script src="../js/bootstrap.min.js"type="text/javascript"></script>
二、 初始化设置:
$("#uploadfile").fileinput({
language: 'zh', //设置语言
uploadUrl:"http://127.0.0.1/testDemo/fileupload/upload.do", //上传的地址
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表示不限制文件大小
//minFileCount: 0,
maxFileCount:10, //表示允许同时上传的最大文件个数
enctype:'multipart/form-data',
validateInitialCount:true,
previewFileIcon: "<iclass='glyphicon glyphicon-king'></i>",
msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!",
}).on("fileuploaded", function (event, data, previewId, index){
});
三、 Options 说明:
属性名 |
属性类型 |
描述说明 |
默认值 |
language |
String |
多语言设置,使用时需提前引入\locales文件夹下对应的语言文件,中文zh,引入语言文件必须放在fileinput.js之后 |
'en' |
showCaption |
Boolean |
是否显示被选文件的简介 |
true |
showBrowse |
Boolean |
是否显示浏览按钮 |
true |
showPreview |
Boolean |
是否显示预览区域 |
true |
showRemove |
Boolean |
是否显示移除按钮 |
true, |
showUpload |
Boolean |
是否显示上传按钮 |
true, |
showCancel |
Boolean |
是否显示取消按钮 |
true, |
showClose: |
Boolean |
是否显示关闭按钮 |
true |
showUploadedThumbs |
Boolean |
true |
|
browseOnZoneClick |
Boolean |
false |
|
autoReplace |
Boolean |
是否自动替换当前图片,设置为true时,再次选择文件,会将当前的文件替换掉。 |
false |
generateFileId |
Object |
null |
|
previewClass |
String |
添加预览按钮的类属性 |
‘’ |
captionClass |
String |
‘’ |
|
frameClass |
String |
'krajee-default' |
|
mainClass |
String |
'file-caption-main' |
|
mainTemplate |
Object |
null |
|
purifyHtml |
Boolean |
true |
|
fileSizeGetter |
Object |
null |
|
initialCaption |
String |
'' |
|
initialPreview |
Array/Object |
[] |
|
initialPreviewDelimiter |
String |
'*$$*' |
|
initialPreviewAsData |
Boolean |
false |
|
initialPreviewFileType |
String |
'image' |
|
initialPreviewConfig |
Array/Object |
[] |
|
initialPreviewThumbTags |
Array/Object |
[] |
|
previewThumbTags |
Object |
{} |
|
initialPreviewShowDelete |
Boolean |
true |
|
removeFromPreviewOnError |
Boolean |
false |
|
deleteUrl |
String |
删除图片时的请求路径 |
'' |
deleteExtraData |
Object |
删除图片时额外传入的参数 |
{} |
overwriteInitial |
Boolean |
true |
|
previewZoomButtonIcons |
Object |
{ prev: '<i class="glyphicon glyphicon-triangle-left"></i>', next: '<i class="glyphicon glyphicon-triangle-right"></i>', toggleheader: '<i class="glyphicon glyphicon-resize-vertical"></i>', fullscreen: '<i class="glyphicon glyphicon-fullscreen"></i>', borderless: '<i class="glyphicon glyphicon-resize-full"></i>', close: '<i class="glyphicon glyphicon-remove"></i>' }, |
|
previewZoomButtonClasses |
Object |
{ prev: 'btn btn-navigate', next: 'btn btn-navigate', toggleheader: 'btn btn-default btn-header-toggle', fullscreen: 'btn btn-default', borderless: 'btn btn-default', close: 'btn btn-default' }, |
|
preferIconicPreview |
Boolrean |
false |
|
preferIconicZoomPreview |
Boolrean |
false |
|
allowedPreviewTypes |
undefined |
undefined |
|
allowedPreviewMimeTypes |
Object |
null |
|
allowedFileTypes |
Object |
接收的文件后缀,如['jpg', 'gif', 'png'],不填将不限制上传文件后缀类型 |
null |
allowedFileExtensions |
Object |
null |
|
defaultPreviewContent |
Object |
null |
|
customLayoutTags |
Object |
{} |
|
customPreviewTags |
Object |
{} |
|
previewFileIcon |
String |
'<i class="glyphicon glyphicon-file"></i>' |
|
previewFileIconClass |
String |
'file-other-icon' |
|
previewFileIconSettings |
Object |
{} |
|
previewFileExtSettings |
Object |
{} |
|
buttonLabelClass |
String |
'hidden-xs' |
|
browseIcon |
String |
'<i class="glyphicon glyphicon-folder-open"></i> ' |
|
browseClass |
String |
'btn btn-primary' |
|
removeIcon |
String |
'<i class="glyphicon glyphicon-trash"></i>' |
|
removeClass |
String |
'btn btn-default' |
|
cancelIcon |
String |
'<i class="glyphicon glyphicon-ban-circle"></i>' |
|
cancelClass |
String |
'btn btn-default' |
|
uploadIcon |
String |
'<i class="glyphicon glyphicon-upload"></i>' |
|
uploadClass |
String |
'btn btn-default' |
|
uploadUrl |
String |
上传文件路径 |
null |
uploadAsync |
boolean |
是否为异步上传 |
true |
uploadExtraData |
上传文件时额外传递的参数设置 |
{} |
|
zoomModalHeight |
number |
480 |
|
minImageWidth |
String |
图片的最小宽度 |
null |
minImageHeight |
String |
图片的最小高度 |
null |
maxImageWidth |
String |
图片的最大宽度 |
null |
maxImageHeight |
String |
图片的最大高度 |
null |
resizeImage |
boolean |
false |
|
resizePreference |
String |
'width' |
|
resizeQuality |
number |
0.92 |
|
resizeDefaultImageType |
String |
'image/jpeg' |
|
minFileSize |
number |
单位为kb,上传文件的最小大小值 |
0 |
maxFileSize |
number |
单位为kb,如果为0表示不限制文件大小 |
0 |
resizeDefaultImageType |
number |
25600(25MB) |
|
minFileCount |
number |
表示同时最小上传的文件个数 |
0 |
maxFileCount |
number |
表示允许同时上传的最大文件个数 |
0 |
validateInitialCount |
boolean |
false |
|
msgValidationErrorClass |
String |
'text-danger' |
|
msgValidationErrorIcon |
String |
'<i class="glyphicon glyphicon-exclamation-sign"></i> ' |
|
msgErrorClass |
String |
'file-error-message' |
|
progressThumbClass |
String |
"progress-bar progress-bar-success progress-bar-striped active" |
|
rogressClass |
String |
"progress-bar progress-bar-success progress-bar-striped active" |
|
progressCompleteClass |
String |
"progress-bar progress-bar-success" |
|
progressErrorClass |
String |
"progress-bar progress-bar-danger" |
|
progressUploadThreshold |
number |
99 |
|
previewFileType |
String |
预览文件类型,内置['image', 'html', 'text', 'video', 'audio', 'flash', 'object',‘other‘]等格式 |
'image' |
elCaptionContainer |
String |
null |
|
elCaptionText |
String |
设置标题栏提示信息 |
null |
elPreviewContainer |
String |
null |
|
elPreviewImage |
String |
null |
|
elPreviewStatus |
String |
null |
|
elErrorContainer |
String |
null |
|
errorCloseButton |
String |
'<span class="close kv-error-close">×</span>' |
|
slugCallback |
String |
null |
|
dropZoneEnabled |
boolean |
是否显示拖拽区域 |
true |
dropZoneTitleClass |
String |
拖拽区域类属性设置 |
'file-drop-zone-title' |
fileActionSettings |
Object |
{} |
|
otherActionButtons |
String |
'' |
|
textEncoding |
String |
编码设置 |
'UTF-8' |
ajaxSettings |
Object |
{} |
|
ajaxDeleteSettings |
Object |
{} |
|
showAjaxErrorDetails |
boolean |
true |
五、 Method说明:
方法名 |
参数 |
描述 |
fileerror |
异步上传错误结果处理 $('#uploadfile').on('fileerror', function(event, data, msg) { }); |
|
fileuploaded |
异步上传成功结果处理 $("#uploadfile").on("fileuploaded", function (event, data, previewId, index) { }) |
|
filebatchuploaderror |
同步上传错误结果处理 $('#uploadfile').on('filebatchuploaderror', function(event, data, msg) { }); |
|
filebatchuploadsuccess |
同步上传成功结果处理 $('#uploadfile').on('filepreupload', function(event, data, previewId, index) { }); |
|
filebatchselected |
选择文件后处理事件 $("#fileinput").on("filebatchselected", function(event, files) { }); |
|
upload |
文件上传方法 $("#fileinput").fileinput("upload"); |
|
fileuploaded |
上传成功后处理方法 $("#fileinput").
|
|
filereset |
||
fileclear |
点击浏览框右上角X 清空文件前响应事件 $("#fileinput").on("fileclear",function(event, data, msg){ }); |
|
filecleared |
点击浏览框右上角X 清空文件后响应事件 $("#fileinput").on("filecleared",function(event, data, msg){ }); |
|
fileimageuploaded |
在预览框中图片已经完全加载完毕后回调的事件 |
六、 常见错误:
(1) 当点击上传后,报错,提示你必须选择最少X个文件上传。
错误原因:html中input标签元素属性:data-min-file-count="2" 设置为X个文件,限制上传文件数。
备注:图片上传比例判断
$("#imgFile").fileinput({}).on('fileimageloaded',function(event,previewId){
var img = $('#'+previewId).find('img')[0];
if (img.naturalWidth!=img.naturalHeight) {
alert('图片尺寸必须1:1');
image_check = true;
$('.fileinput-remove').click();
}else{
image_check = false;
$('.fileinput-upload').show();
}
})
$("#imgFile").fileinput({
language : 'zh',
//uploadUrl:'../../module/uploadMod/index.php?c=upd&a=fileInputUpload&dir=image',
showUpload: false, //是否显示上传按钮
showCaption: false,//是否显示输入框
showRemove: true,//是否显示删除按钮
dropZoneEnabled: false,
showClose:false,
showDrag: false,
//initialPreviewShowDelete:false,
browseClass: "btn btn-primary",
allowedFileExtensions: ['jpg', 'png', 'gif'],
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
overwriteInitial: false,
initialPreviewAsData: true,
//initialPreview: [],
//initialPreviewConfig:images_arr_info,
fileActionSettings:{
showZoom: true,
showDrag: false,
showRemove:false,
showUpload:false
}
}).on("fileuploaded", function(event, data,previewId,index) {
var data = data.response;
image = JSON.stringify(data);
$("#topImg").hide().parent().hide();
$('.fileinput-upload').hide();
}).on('filebatchselected', function(event, files) {
if(files.length<=0){
$('.fileinput-upload-button').hide();
}else{
$('.fileinput-upload-button').show();
}
}).on('fileimageloaded',function(event,previewId){
var img = $('#'+previewId).find('img')[0];
if (img.naturalWidth!=img.naturalHeight) {
alert('图片尺寸必须1:1');
image_check = true;
$('.fileinput-remove').click();
}else{
image_check = false;
$('.fileinput-upload').show();
}
});
$('.fileinput-remove').on('click',function () {
image = '';
$("#topImg").val('').show().parent().show();
$('.fileinput-upload').hide();
})
bootstrap fileinput api相关推荐
- Bootstrap FileInput(文件上传)中文API整理
下载地址.API和DOM地址(英语好的小伙伴可以看看) 下载地址:https://github.com/kartik-v/bootstrap-fileinput API文档 :http://plugi ...
- php 表格导入excel插件,BootStrap Fileinput插件和表格插件相结合实现导入Excel数据的文件上传、预览、提交的步骤...
这篇文章主要介绍了BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传.预览.提交的导入Excel数据操作步骤,需要的朋友可以参考下 bootstrap ...
- fileinput.js php,bootstrap fileinput 插件使用项目总结
基础的定义及使用方法网上有很多不再概述,这儿主要写本人所使用项目时碰到的一些问题及解决方案 注:本人使用此插件主要用来上传图片之用,插件其他上传文件没有涉及 一.上传最小数量问题 通过查阅其他资料可知 ...
- Bootstrap fileinput.js,最好用的文件上传组件
本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存. 一.demo 二.插件引入 <link ty ...
- bootstrap+fileinput插件实现可预览上传照片功能
图片.png 实际项目中运用: 图片.png 功能:实现上传图片,更改上传图片,移除图片的功能 <!DOCTYPE html> <html><head><me ...
- 为什么手机上传图片这么慢 前端_解决BootStrap Fileinput手机图片上传显示旋转问题_心病_前端开发者...
最近因为项目需要用到了bootstrap fileinput的插件,在使用苹果手机上传图片预览时,发现图片方向和手机本地存储方向不一致问题.后来通过查询资料了解图片具有EXIF(Exchangeabl ...
- php 使用上传文件预览插件,bootstrap fileinput插件实现预览上传照片功能方法详解...
本文主要介绍了bootstrap fileinput插件实现预览上传照片功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下,希望能帮助到大家. 效果图如下所示: 具体代码如下: cl ...
- SSM框架 基于Bootstrap fileinput 实现文件上传功能
SSM框架 基于Bootstrap fileinput 实现文件上传功能 pom.xml文件的配置 想要实现SSM框架实现多文件上传,必要的jar包必须要在pom.xml文件中引入.如下: <! ...
- Bootstrap Table API 中文版(完整翻译文档)
/* * *$('#table').bootstrapTable({}); *看网上有中文版的,但有些就是字面直接译过来了,而且有的就没有翻译,那就打算自己再翻译一遍,每一条会尽 *最大可能结合尽可能 ...
最新文章
- 新闻行业中,自然语言理解技术该如何应用?
- tomcat学习笔记——lifecycle(容器)启动都干了什么
- Leetcode--120. 三角形最小路径和
- 第五节:轻松掌握 vue 实例的生命周期
- matlab从哪里学,从零开始学MATLAB(附光盘)/从零开始学系列
- POJ NOI MATH-7648 蓄水池水管问题
- java发布rest服务器_ArcGIS Server 10 Java 版的Rest服务的部署方法
- jquery ajax加载页面进度条,jquery网页加载进度条的实现
- C语言:甲乙丙丁分糖
- t台式计算机如何安装2个硬盘,台式机械硬盘怎么安装?机械硬盘安装图解教程(SATA固态可参考)(2)...
- Gazebo手册:【1】gazebo基本操作案例
- [Kerberos基础]-- kerberos认证原理---讲的非常细致,易懂
- C语言求1到10以内的约数,倍数和约数 教学设计资料
- WLAN没有有效的IP配置如何一招解决
- [渝粤教育] 南京信息工程大学 会计学 参考 资料
- can转光纤,can 光端机 can 光适配国内主流消防主机的CAN光纤转换器的介绍
- 设置共享显示没有启动服务器服务,共享文件夹的时候提示 服务器没有启动这个服务 是怎么一回事??...
- C#调用百度翻译API实现自己的简单翻译工具
- 高中数学函数奇偶性知识点经典题型解题技巧【提分秘籍】
- 大话2服务器维护,《大话西游2》3月26日维护公告