前言~ 前段时间做项目用到了bootstrap里中的文件上传控件，对此特定写这篇文章，讲述一下bootstrap的文件上传空间的使用方法。
我们进入正题吧！
首先bootstrap是基于jquery的，因此要导入jquery响应jar包,可以找到以下网站：jquery相关js下载。
进入网址后，可以选择我圈起来的地址，打开浏览器输入，并将该js的所有内容复制下来，创建一个" .js "文件存储这些内容作为jquery.js使用。
其次要下载bootstrap的文件包，相必你们已经有了，那么我就只推出下载fileinput的相关文件包即可，以下是下载地址下载fileinput相关文件包。
再次分别导入bootstrap和fileinput的相关css文件，js文件，如下所示：
<link rel="stylesheet" href="../static/css/bootstrap.css">
<link rel="stylesheet" href="../static/css/fileinput.min.css">
<link rel="stylesheet" href="../static/css/themes/theme.css">
<script type="text/javascript" src="../static/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../static/js/fileinput.min.js"></script>
<script type="text/javascript" src="../static/js/locales/zh.js"></script>
<script type="text/javascript" src="../static/js/themes/theme.js"></script>后面可以选择两种方式配置fileinput的相关属性，一种是在jsp或者html中直接配置，第二种是写一个js，然后将该js引入。本人推荐使用第二种，因为比较灵活。下面我都列出两种方式：
第一种：
<div class="container kv-main">
<div class="row ">
<div style="margin:100px 240px;width:700px;height:300px ">
<form nctype="multipart/form-data">
<input id="file-0a" class="file" name="file" type="file" multiple data-min-file-count="1">
<br>
</form>
</div>
</div>
<script>
$('#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：
| 属性名 |
默认值 |
中文 |
| fileSingle |
file |
文件 |
| filePlural |
files |
个文件 |
| browseLabel |
Browse &hellip |
选择 … |
| removeLabel |
Remove |
移除 |
| removeTitle |
Clear selected files |
清除选中文件 |
| cancelLabel |
Cancel |
取消 |
| cancelTitle |
Abort ongoing upload |
取消进行中的上传 |
| uploadLabel |
Upload |
上传 |
| uploadTitle |
Upload selected files |
上传选中文件 |
| msgNo |
No |
没有 |
| msgNoFilesSelected |
No files selected |
“” |
| msgCancelled |
Cancelled |
取消 |
| msgZoomModalHeading |
Detailed Preview |
详细预览 |
| msgSizeTooSmall |
File "{name}" (<b>{size} KB</b>) is too small and must be larger than <b>{minSize} KB</b>. |
File "{name}" (<b>{size} KB</b>) is too small and must be larger than <b>{minSize} KB</b>. |
| msgSizeTooLarge |
File "{name}" (<b>{size} KB</b>) exceeds maximum allowed upload size of <b>{maxSize} KB</b>. |
文件 "{name}" (<b>{size} KB</b>) 超过了允许大小 <b>{maxSize} KB</b>. |
| msgFilesTooLess |
You must select at least <b>{n}</b> {files} to upload. |
你必须选择最少 <b>{n}</b> {files} 来上传. |
| msgFilesTooMany |
Number of files selected for upload <b>({n})</b> exceeds maximum allowed limit of <b>{m}</b>. |
选择的上传文件个数 <b>({n})</b> 超出最大文件的限制个数 <b>{m}</b>. |
| msgFileNotFound |
File "{name}" not found! |
文件 "{name}" 未找到! |
| msgFileSecured |
Security restrictions prevent reading the file "{name}". |
安全限制，为了防止读取文件 "{name}". |
| msgFileNotReadable |
File "{name}" is not readable. |
文件 "{name}" 不可读. |
| msgFilePreviewAborted |
File preview aborted for "{name}". |
取消 "{name}" 的预览. |
| msgFilePreviewError |
An error occurred while reading the file "{name}". |
读取 "{name}" 时出现了一个错误. |
| msgInvalidFileName |
Invalid or unsupported characters in file name "{name}". |
Invalid or unsupported characters in file name "{name}". |
| msgInvalidFileType |
Invalid type for file "{name}". Only "{types}" files are supported. |
不正确的类型 "{name}". 只支持 "{types}" 类型的文件. |
| msgInvalidFileExtension |
Invalid extension for file "{name}". Only "{extensions}" files are supported. |
不正确的文件扩展名 "{name}". 只支持 "{extensions}" 的文件扩展名. |
| msgFileTypes |
{ 'image': 'image', 'html': 'HTML', 'text': 'text', 'video': 'video', 'audio': 'audio', 'flash': 'flash', 'pdf': 'PDF', 'object': 'object' }, |
{ 'image': 'image', 'html': 'HTML', 'text': 'text', 'video': 'video', 'audio': 'audio', 'flash': 'flash', 'pdf': 'PDF', 'object': 'object' }, |
| msgUploadAborted |
The file upload was aborted |
该文件上传被中止 |
| msgUploadThreshold |
Processing... |
Processing... |
| msgUploadBegin |
Initializing... |
Initializing... |
| msgUploadEnd |
Done |
Done |
| msgUploadEmpty |
No valid data available for upload. |
No valid data available for upload. |
| msgValidationError |
Validation Error |
验证错误 |
| msgLoading |
Loading file {index} of {files} … |
加载第 {index} 文件 共 {files} … |
| msgProgress |
Loading file {index} of {files} - {name} - {percent}% completed. |
加载第 {index} 文件 共 {files} - {name} - {percent}% 完成. |
| msgSelected |
{n} {files} selected |
{n} {files} 选中 |
| msgFoldersNotAllowed |
Drag & drop files only! {n} folder(s) dropped were skipped. |
只支持拖拽文件! 跳过 {n} 拖拽的文件夹. |
| msgImageWidthSmall |
Width of image file "{name}" must be at least {size} px. |
宽度的图像文件的"{name}"的必须是至少{size}像素. |
| msgImageHeightSmall |
Height of image file "{name}" must be at least {size} px. |
图像文件的"{name}"的高度必须至少为{size}像素. |
| msgImageWidthLarge |
Width of image file "{name}" cannot exceed {size} px. |
宽度的图像文件"{name}"不能超过{size}像素. |
| msgImageHeightLarge |
Height of image file "{name}" cannot exceed {size} px. |
图像文件"{name}"的高度不能超过{size}像素. |
| msgImageResizeError |
Could not get the image dimensions to resize. |
无法获取的图像尺寸调整。 |
| msgImageResizeException |
Error while resizing the image.<pre>{errors}</pre> |
错误而调整图像大小。<pre>{errors}</pre> |
| msgAjaxError |
Something went wrong with the {operation} operation. Please try again later! |
Something went wrong with the {operation} operation. Please try again later! |
| msgAjaxProgressError |
{operation} failed |
{operation} failed |
| ajaxOperations |
{ deleteThumb: 'file delete', uploadThumb: 'file upload', uploadBatch: 'batch file upload', uploadExtra: 'form data upload' }, |
{ deleteThumb: 'file delete', uploadThumb: 'file upload', uploadBatch: 'batch file upload', uploadExtra: 'form data upload' }, |
| dropZoneTitle |
Drag & drop files here … |
拖拽文件到这里 …<br>支持多文件同时上传 |
| dropZoneClickTitle |
<br>(or click to select {files}) |
<br>(或点击{files}按钮选择文件) |
| previewZoomButtonTitles |
{ prev: 'View previous file', next: 'View next file', toggleheader: 'Toggle header', fullscreen: 'Toggle full screen', borderless: 'Toggle borderless mode', close: 'Close detailed preview' } |
{ prev: '预览上一个文件', next: '预览下一个文件', toggleheader: '缩放', fullscreen: '全屏', borderless: '无边界模式', close: '关闭当前预览' } |
| fileActionSettings |
{ removeTitle: '删除文件', uploadTitle: '上传文件', zoomTitle: '查看详情', dragTitle: '移动 / 重置', indicatorNewTitle: '没有上传', indicatorSuccessTitle: '上传', indicatorErrorTitle: '上传错误', indicatorLoadingTitle: '上传 ...' }, |
|
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").
|
|
| 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;
}