前言~ 前段时间做项目用到了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;
}