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;
    }