ace File-Input实现图片上传功能+colorBox显示图片

1.前台jsp页面

<!--上传图片-->
<label class="control-label col-xs-12 col-sm-1 no-padding"   for="files">示例图片:</label>
<div class="col-xs-12 col-sm-5">
<input type="file" name="files" id="id-input-file-2" />
<input style="display: none" type="text" id="fileName" value="${fileName}"/>
</div>

<div class="col-xs-12 col-sm-1 no-padding-left">
<div id="wrap" class="wrap" ${(fileName=='' || fileName == null)? 'style="display:none" ':''}>
<div class="ace-thumbnails clearfix">
<a href="${location}" data-rel="colorbox" style="line-height:20px;font-family:黑体;text-decoration: underline;
color:cornflowerblue;font-size: 16px">
查看图片
</a>
</div>
</div>
</div>
</div>

2.前台coloerBox显示图片js代码

<script type="text/javascript">
var scripts = [null, '${ctxStatic}/assets/js/date-time/bootstrap-datepicker.js',
'${ctxStatic}/assets/js/date-time/bootstrap-datepicker.zh-CN.min.js',
'${ctxStatic}/assets/js/jquery.colorbox.js',null];
$('.page-content-area').ace_ajax('loadScripts', scripts, function() {
jQuery(function ($) {
var $overflow = '';
var colorbox_params = {
rel: 'colorbox',
reposition:true,
scalePhotos:true,
scrolling:false,
close:'×',
maxWidth:'100%',
maxHeight:'100%',
onOpen:function(){
$overflow = document.body.style.overflow;
document.body.style.overflow = 'hidden';
},
onClosed:function(){
document.body.style.overflow = $overflow;
},
onComplete:function(){
$.colorbox.resize();
}
};
$('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);

$("#cboxLoadingGraphic").html("<i class='ace-icon fa fa-spinner orange fa-spin'></i>");//let's add a custom loading icon

$(document).one('ajaxloadstart.page', function(e) {
$('#colorbox, #cboxOverlay').remove();
});

3.前台Js图片上传代码

<!--文件上传的功能-->
$('#id-input-file-2').bind("myClick", function(){
var fileName = $('#fileName').val();
if(fileName){
$('.ace-file-name').attr("data-title",fileName);
$('.ace-file-container').attr("data-title","修改");
$('.ace-file-name .fa').removeClass("fa-upload");
$('.ace-file-name .fa').addClass("fa-picture-o");
}
});

$('#id-input-file-2').ace_file_input({
no_file:'请选择图片',
btn_choose:'选择',
btn_change:'修改',
droppable:false,
onchange:null,
thumbnail:false,//| true | large
allowExt: ["jpeg", "jpg", "png", "gif", "bmp"],
allowMime: ["image/jpg", "image/jpeg", "image/png", "image/gif", "image/bmp"],

}).on("change", function() {
//对已上传的图片进行修改时，将已上传图片显示框隐藏掉
document.getElementById('wrap').style.display='none';
}).trigger("myClick");

4.后台图片上传代码逻辑

/**
* 图片上传功能
* @param files
* @return
*/
public static String upload( MultipartFile[] files,Tenant tenant) {
String str = null;
String filePath=tenant.getId();
for (int i = 0; i < files.length; i++) {
MultipartFile file = files[i];
//验证格式
String fileName = file.getOriginalFilename();
//lastIndexOf在一个字符串中的指定位置从后向前搜索。
String suffix = fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length());
List<String> PIC_Format = Arrays.asList("jpg", "JPG", "png", "PNG", "gif", "GIF", "jpeg", "JPEG");
if (!PIC_Format.contains(suffix)) {
str = "上传文件格式错误";
return str;
}
//验证图片大小
if (file.getSize() > 15*1024) {
str = "上传图片过大,请上传不超过400x45的图片大小";
return str;
}
//本地保存路径 配置路径+wpId+actionCaseId+文件名
String urlString = "/uploads/tenant/tenantImage";
//fileName = IdGen.uuid() + "_" + fileName;
//本地保存路径 配置路径+wpId+actionCaseId+文件名
String fileLocalPath = Global.getUserfilesBaseDir() + urlString + "/" + filePath ;
//目录不存在则创建，目录下已存在图片，则需先删除，再保存新图片
File saveDirFile = new File(fileLocalPath);
if (saveDirFile.exists()) {
if(saveDirFile.isDirectory()){
File[] childFileArr = saveDirFile.listFiles();//当前文件夹下的子文件和子目录
for (File fItem : childFileArr) {
fItem.delete();
}
}
saveDirFile = new File(fileLocalPath + "/" + fileName);
}else{
saveDirFile = new File(fileLocalPath + "/" + fileName);
saveDirFile.mkdirs();
}
//保存文件
try {
file.transferTo(saveDirFile);
} catch (Exception e) {
e.printStackTrace();
str = "图片上传失败";
return str;
}
}
return str;
}