Bootstrap文件上传组件:Bootstrap fileinput

时间:2021-12-26 00:11:27

一、使用前准备

1、Bootstrap File Input 源码下载地址:https://github.com/kartik-v/bootstrap-fileinput/
2、Bootstrap File Input API地址:http://plugins.krajee.com/file-input

二、使用方法

1、导入依赖的js和css文件:

<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/fileinput.min.css" />
<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<script type="text/javascript" src="js/fileinput.js" ></script>
<script type="text/javascript" src="js/zh.js" ></script>
<script type="text/javascript" src="js/my.js" ></script>

2、建立一个文件输入区

<form>
<div class="form-group">
<h3>Bootstrap File Input Demo1</h3>
</div>

<input name="uploadFile" type="file" id="uploadFile" multiple class="file-loading" />
</form>

3、编写my.js文件,初始化文件上传组件

$(function() {
//初始化fileinput
var fileInput = new FileInput();
fileInput.Init("uploadFile", "http://127.0.0.1/testDemo/fileupload/upload.action");
});

//初始化fileinput
var FileInput = function() {
var oFile = new Object();

//初始化fileinput控件(第一次初始化)
oFile.Init = function(ctrlName, uploadUrl) {
var control = $('#' + ctrlName);

//初始化上传控件的样式
control.fileinput({
language: 'zh', //设置语言
uploadUrl: 'http://127.0.0.1/testDemo/fileupload/upload.action', //上传的地址
allowedFileExtensions: ['jpg', 'png', 'gif'], //接收的文件后缀
uploadAsync: true, //默认异步上传

showUpload: false, //是否显示上传按钮
showRemove: true, //显示移除按钮
showCaption: true, //是否显示标题

dropZoneEnabled: true, //是否显示拖拽区域

//minImageWidth: 50, //图片的最小宽度
//minImageHeight: 50,//图片的最小高度
//maxImageWidth: 1000,//图片的最大宽度
//maxImageHeight: 1000,//图片的最大高度
//maxFileSize:0,//单位为kb,如果为0表示不限制文件大小
//minFileCount: 0,
maxFileCount: 10, //表示允许同时上传的最大文件个数
enctype: 'multipart/form-data',

browseClass: "btn btn-primary", //按钮样式: btn-default、btn-primary、btn-danger、btn-info、btn-warning
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",

});

//文件上传完成之后发生的事件
$("#uploadFile").on("fileuploaded", function(event, data, previewId, index) {

});
}
return oFile; //这里必须返回oFile对象,否则FileInput组件初始化不成功
};

三、效果图

1、初始化界面:

Bootstrap文件上传组件:Bootstrap fileinput

2、可以实现多文件上传:

Bootstrap文件上传组件:Bootstrap fileinput

3、点击某个文件,可以实现全屏预览:

Bootstrap文件上传组件:Bootstrap fileinput

四、Options介绍

属性名 属性类型 描述说明 默认值
language String 多语言设置,使用时需提前引入\locales文件夹下对应的语言文件,中文zh,引入语言文件必须放在fileinput.js之后 ‘en’
showCaption Boolean 是否显示被选文件的简介 true
showBrowse Boolean 是否显示浏览按钮 true
showPreview Boolean 是否显示预览区域 true
showUpload Boolean 是否显示上传按钮 true
showCancel Boolean 是否显示取消按钮 true
showClose Boolean 是否显示关闭按钮 true
showUploadedThumbs Boolean 是否显示缩略图 true
autoReplace Boolean 是否自动替换当前图片,设置为true时,再次选择文件,会将当前的文件替换掉。 false
deleteUrl String 删除图片时的请求路径
deleteExtraData Object 删除图片时额外传入的参数 {}
allowedFileTypes Object 接收的文件后缀,如[‘jpg’, ‘gif’, ‘png’],不填将不限制上传文件后缀类型 null
uploadUrl String 上传文件URL,即后台处理URL null
uploadAsync boolean 是否为异步上传 true
uploadExtraData 上传文件时额外传递的参数设置 {}
minImageWidth String 图片的最小宽度 null
minImageHeight String 图片的最小高度 null
maxImageWidth String 图片的最大宽度 null
maxImageHeight String 图片的最大高度 null
minFileSize number 单位为kb,上传文件的最小大小值 0
maxFileSize number 单位为kb,如果为0表示不限制文件大小 0
inFileCount number 表示同时最小上传的文件个数 0
maxFileCount number 表示允许同时上传的最大文件个数 0
previewFileType String 预览文件类型,内置[‘image’, ‘html’, ‘text’, ‘video’, ‘audio’, ‘flash’, ‘object’,‘other‘]等格式 ‘image’
elCaptionText String 设置标题栏提示信息 null
dropZoneEnabled boolean 是否显示拖拽区域 true
dropZoneTitleClass String 拖拽区域类属性设置 ‘file-drop-zone-title’

五、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”).on(“fileuploaded”, function(event, data, previewId, index) {});
filereset
fileclear 点击浏览框右上角X 清空文件前响应事件 $(“#fileinput”).on(“fileclear”,function(event, data, msg){});
filecleared 点击浏览框右上角X 清空文件后响应事件 $(“#fileinput”).on(“filecleared”,function(event, data, msg){});
fileimageuploaded 在预览框中图片已经完全加载完毕后回调的事件

六、源码下载