Bootstrap之fileinput文件上传控件

前言~ 前段时间做项目用到了bootstrap里中的文件上传控件，对此特定写这篇文章，讲述一下bootstrap的文件上传空间的使用方法。

我们进入正题吧！

首先bootstrap是基于jquery的，因此要导入jquery响应jar包,可以找到以下网站：jquery相关js下载。

进入网址后，可以选择我圈起来的地址，打开浏览器输入，并将该js的所有内容复制下来，创建一个" .js "文件存储这些内容作为jquery.js使用。

其次要下载bootstrap的文件包，相必你们已经有了，那么我就只推出下载fileinput的相关文件包即可，以下是下载地址下载fileinput相关文件包。

再次分别导入bootstrap和fileinput的相关css文件，js文件，如下所示：

后面可以选择两种方式配置fileinput的相关属性，一种是在jsp或者html中直接配置，第二种是写一个js，然后将该js引入。本人推荐使用第二种，因为比较灵活。下面我都列出两种方式。

第一种：

<br>

</form>

</div>

$('#file-0a').fileinput({

'theme':'explorer',

language:'zh',

uploadUrl:'<%=path%>/uploadMultipleFile.do',

showPreview:true,//是否显示预览

allowedPreviewTypes : ['image','html','text','video','audio','flash'],

maxFileCount :3,// 表示允许同时上传的最大文件个数

});

$('#file-0a').on('fileuploaderror',function(event, data, previewId, index) {

var form = data.form,files = data.files,extra = data.extra,

response = data.response,reader = data.reader;

console.log(data);

console.log('File upload error');

});

$('#file-0a').on('fileerror',function(event, data) {

console.log(data.id);

console.log(data.index);

console.log(data.file);

console.log(data.reader);

console.log(data.files);

});

$('#file-0a').on('fileuploaded',function(event, data, previewId, index) {

var form = data.form,files = data.files,extra = data.extra,

response = data.response,reader = data.reader;

console.log('File uploaded triggered');

});

</script>

第二种：

$(function () {

//0.初始化fileinputvaroFileInput =new FileInput();

oFileInput.Init("file-0a", "/api/OrderApi/ImportOrder");

});

//初始化fileinputvarFileInput =function () {

varoFile =new Object();

//初始化fileinput控件（第一次初始化）oFile.Init =function(ctrlName, uploadUrl) {

varcontrol = $('#' + ctrlName);

//初始化上传控件的样式 control.fileinput({

language: 'zh',//设置语言

uploadUrl: uploadUrl,//上传的地址

allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀

showUpload: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: "",

msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！", });

//导入文件上传完成之后的事件

$('#file-0a').on('fileuploaderror',function(event, data, previewId, index) {

var form = data.form,files = data.files,extra = data.extra,

response = data.response,reader = data.reader;

console.log(data);

console.log('File upload error');

});

$('#file-0a').on('fileerror',function(event, data) {

console.log(data.id);

console.log(data.index);

console.log(data.file);

console.log(data.reader);

console.log(data.files);

});

$('#file-0a').on('fileuploaded',function(event, data, previewId, index) {

var form = data.form,files = data.files,extra = data.extra,

response = data.response,reader = data.reader;

console.log('File uploaded triggered');

});

}

return oFile;

};

以下将提供fileinput的相关api

属性名属性类型描述说明默认值

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: '',

next: '',

toggleheader: '',

fullscreen: '',

borderless: '',

close: ''

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 ''

previewFileIconClass String 'file-other-icon'

previewFileIconSettings Object {}

previewFileExtSettings Object {}

buttonLabelClass String 'hidden-xs'

browseIcon String ' '

browseClass String 'btn btn-primary'

removeIcon String ''

removeClass String 'btn btn-default'

cancelIcon String ''

cancelClass String 'btn btn-default'

uploadIcon String ''

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 ' '

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 '×'

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

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

后台代码

/**

* 多文件上传

* @param files 文件数组

* @param request

* @return

* @throws IOException

@RequestMapping(value ="/uploadMultipleFile.do", method = RequestMethod.POST, produces ="application/json;charset=utf8")

@ResponseBody

public Message uploadMultipleFileHandler(@RequestParam("file") MultipartFile[] files, HttpServletRequest request)throws IOException {

Message msg =new Message();

ArrayList arr =new ArrayList();

String serverPath=null;

for (int i =0; i < files.length; i++) {

MultipartFile file = files[i];

if (!file.isEmpty()) {

InputStream in =null;

OutputStream out =null;

try {

if(file.getOriginalFilename().substring(0,file.getOriginalFilename().indexOf(".")).contains("表1-恶意程序监测统计")){

serverPath=FileUtil.getMalwareUploadDirFilePath(file.getOriginalFilename(), request);

}else{

serverPath=FileUtil.getHighRiskUploadDirFilePath(file.getOriginalFilename(), request);

}

/*String serverPath=dir.getAbsolutePath() + File.separator + file.getOriginalFilename();*/

File serverFile =new File(serverPath);

in = file.getInputStream();

out =new FileOutputStream(serverFile);

byte[] b =new byte[1024];

int len =0;

while ((len = in.read(b)) >0) {

out.write(b,0, len);

}

out.close();

in.close();

logger.info("Server File Location=" + serverFile.getAbsolutePath());

}catch (Exception e) {

arr.add(i);

}finally {

if (out !=null) {

out.close();

out =null;

}

if (in !=null) {

in.close();

in =null;

}

}else {

arr.add(i);

}

if(arr.size() >0) {

msg.setStatus(Status.ERROR);

msg.setError("Files upload fail");

msg.setErrorKys(arr);

}else {

msg.setStatus(Status.SUCCESS);

msg.setStatusMsg("Files upload success");

}

return msg;

}