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

1.前台jsp页面

示例图片: 查看图片

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

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(""); //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.后台图片上传代码逻辑
【ace File-Input实现图片上传功能+colorBox显示图片】

/** * 图片上传功能 * @param files * @return */ public staticString 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 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; }