一、使用前准备
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介绍
属性名属性类型描述说明默认值languageString多语言设置，使用时需提前引入\locales文件夹下对应的语言文件，中文zh，引入语言文件必须放在fileinput.js之后‘en’showCaptionBoolean是否显示被选文件的简介trueshowBrowseBoolean是否显示浏览按钮trueshowPreviewBoolean是否显示预览区域trueshowUploadBoolean是否显示上传按钮trueshowCancelBoolean是否显示取消按钮trueshowCloseBoolean是否显示关闭按钮trueshowUploadedThumbsBoolean是否显示缩略图trueautoReplaceBoolean是否自动替换当前图片，设置为true时，再次选择文件，会将当前的文件替换掉。falsedeleteUrlString删除图片时的请求路径”deleteExtraDataObject删除图片时额外传入的参数{}allowedFileTypesObject接收的文件后缀，如[‘jpg’, ‘gif’, ‘png’],不填将不限制上传文件后缀类型nulluploadUrlString上传文件URL，即后台处理URLnulluploadAsyncboolean是否为异步上传trueuploadExtraData上传文件时额外传递的参数设置{}minImageWidthString图片的最小宽度nullminImageHeightString图片的最小高度nullmaxImageWidthString图片的最大宽度nullmaxImageHeightString图片的最大高度nullminFileSizenumber单位为kb，上传文件的最小大小值0maxFileSizenumber单位为kb，如果为0表示不限制文件大小0inFileCountnumber表示同时最小上传的文件个数0maxFileCountnumber表示允许同时上传的最大文件个数0previewFileTypeString预览文件类型,内置[‘image’, ‘html’, ‘text’, ‘video’, ‘audio’, ‘flash’, ‘object’,‘other‘]等格式‘image’elCaptionTextString设置标题栏提示信息nulldropZoneEnabledboolean是否显示拖拽区域truedropZoneTitleClassString拖拽区域类属性设置‘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) {});fileresetfileclear点击浏览框右上角X 清空文件前响应事件$(“#fileinput”).on(“fileclear”,function(event, data, msg){});filecleared点击浏览框右上角X 清空文件后响应事件$(“#fileinput”).on(“filecleared”,function(event, data, msg){});fileimageuploaded在预览框中图片已经完全加载完毕后回调的事件六、源码下载
