Bootstrap文件上传组件：Bootstrap fileinput

一、使用前准备

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、初始化界面：

这里写图片描述

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

这里写图片描述

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

这里写图片描述

四、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		在预览框中图片已经完全加载完毕后回调的事件

六、源码下载

Bootstrap文件上传组件：Bootstrap fileinput

猜你喜欢