图片上传（支持拖拽上传）及列表图片预览

要注意的是图片路径

先看效果图：

下面是代码啦：

前端ftl

index:

<#assign base=request.contextPath/>
<!DOCTYPE HTML>
<html lang="zh-cn">
<head><base id="base" href="${base}"><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>图片资源管理</title>
<#include "${base}/common/head.ftl"/>
</head>
<body>
<div id="main"><div id="toolbar"><shiro:hasPermission name="upms:system:create"><a class="waves-effect waves-button" href="${base}/cebs/imags/add"><i class="zmdi zmdi-plus"></i> 添加图片</a></shiro:hasPermission><shiro:hasPermission name="upms:system:delete"><a class="waves-effect waves-button" href="javascript:;" οnclick="deleteAction()"><i class="zmdi zmdi-close"></i> 批量删除</a></shiro:hasPermission></div><!--搜索--><form id="search-form" class="form-inline"><div class="input-group"><input type="text" id="keyword" class="form-control" placeholder="请输入图片名称"/><div class="input-group-btn"><button type="button" class="btn btn-default" id="searchbtn"><span class="glyphicon glyphicon-search"></span></button></div></div></form><table id="table"></table>
</div>
<#include "${base}/common/footer.ftl"/>
<script>var $table = $('#table');//模糊搜索加载页面$('#searchbtn').click(function () {var keyword = $("#keyword").val();// bootstrap table初始化$table.bootstrapTable('destroy');initTableHeight();$table.bootstrapTable({url: '${base}/cebs/imags?keyword='+keyword,height: $(window).height()-60,striped: true,showRefresh: true,showColumns: true,minimumCountColumns: 2,clickToSelect: true,detailView: true,detailFormatter:function(index,row){var str = "";str+= "<div>";str+= "<label class='form-control' style='border:0px;'>图 片 名 称：";if(row.name==undefined||row.name==""){str+= "-";}else{str+=row.name;}str+="</label>";str+= "<label class='form-control' style='border:0px;'>图片预览：";if(row.imagepath==undefined){str+= "-";}else{str+="<img style='height:30px;'  src='"+row.imagepath+"'/>";}str+="</label>"str+= "<label class='form-control' style='border:0px;'>上 传 用 户：";if(row.uploaduser==undefined||row.uploaduser==""){str+="-";}else{str+=row.uploaduser;}str+="</label>";str+= "<label class='form-control' style='border:0px;'>上 传 时 间：";if(row.uploadtime==undefined){str+= "-";}else{str+=timeFormatter(row.uploadtime,row,index);}str+="</label>";str+= "<label class='form-control' style='border:0px;'>     URL：";if(row.url==undefined){str+= "-";}else{str+=row.url;}str+="</label>";str+= "<label class='form-control' style='border:0px;'>状          态：";if(row.upstatus==0){str+="<span class='label label-default'>下线</span>"}else if(row.upstatus==1){str+="<span class='label label-success'>上线</span>";}else{str+= "-";}str+="</label>";str+= "</div>";return str;},pagination: true,paginationLoop: false,sidePagination: 'server',silentSort: false,smartDisplay: false,escape: true,idField: 'id',maintainSelected: true,toolbar: '#toolbar',uniqueId: "id",columns: [{field: 'ck', checkbox: true},{title: '序号', align: 'center',width:'50',formatter: 'orderFormatter'},{field: 'id',title: '图片编号',align: 'center',visible:false},{field: 'name', title: '图片名称', align: 'center'},{field: 'imagepath', title: '图片预览',align: 'center',formatter: 'imgFormatter'},{field: 'uploaduser', title: '上传用户', align: 'center'},{field: 'uploadtime', title: '上传时间',align: 'center',formatter: 'timeFormatter'},{field: 'url', title: 'URL',align: 'center'},{field: 'upstatus', title: '状态', align: 'center', formatter: 'statusFormatter'},{field: 'action', title: '操作', align: 'center', formatter: 'actionFormatter',width:'100'}]});});//加载页面$(function() {// initTableHeight();$table.bootstrapTable({url: '${base}/cebs/imags',height: $(window).height()-60,striped: true,showRefresh: true,showColumns: true,minimumCountColumns: 2,clickToSelect: true,detailView: true,detailFormatter:function(index,row){var str = "";str+= "<div>";str+= "<label class='form-control' style='border:0px;'>图 片 名 称：";if(row.name==undefined||row.name==""){str+= "-";}else{str+=row.name;}str+="</label>";str+= "<label class='form-control' style='border:0px;'>图片预览：";if(row.imagepath==undefined){str+= "-";}else{str+="<img style='height:30px;'  src='"+row.imagepath+"'/>";}str+="</label>"str+= "<label class='form-control' style='border:0px;'>上 传 用 户：";if(row.uploaduser==undefined||row.uploaduser==""){str+="-";}else{str+=row.uploaduser;}str+="</label>";str+= "<label class='form-control' style='border:0px;'>上 传 时 间：";if(row.uploadtime==undefined){str+= "-";}else{str+=timeFormatter(row.uploadtime,row,index);}str+="</label>";str+= "<label class='form-control' style='border:0px;'>     URL：";if(row.url==undefined){str+= "-";}else{str+=row.url;}str+="</label>";/*str+= "<label class='form-control' style='border:0px;'>          URL：";if(row.price==undefined){str+= "-";}else{str+=row.price;}str+="</label>";*/str+= "<label class='form-control' style='border:0px;'>状          态：";if(row.upstatus==0){str+="<span class='label label-default'>下线</span>"}else if(row.upstatus==1){str+="<span class='label label-success'>上线</span>";}else{str+= "-";}str+="</label>";str+= "</div>";return str;},pagination: true,paginationLoop: false,sidePagination: 'server',silentSort: false,smartDisplay: false,escape: true,idField: 'id',maintainSelected: true,toolbar: '#toolbar',uniqueId: "productid",columns: [{field: 'ck', checkbox: true},{title: '序号', align: 'center',width:'50',formatter: 'orderFormatter'},{field: 'id',title: '图片编号',align: 'center',visible:false},{field: 'name', title: '图片名称', align: 'center'},{field: 'imagepath', title: '图片预览',align: 'center',formatter: 'imgFormatter'},{field: 'uploaduser', title: '上传用户', align: 'center'},{field: 'uploadtime', title: '上传时间',align: 'center',formatter: 'timeFormatter'},{field: 'url', title: 'URL',align: 'center'},{field: 'upstatus', title: '状态', align: 'center', formatter: 'statusFormatter'},{field: 'action', title: '操作', align: 'center', formatter: 'actionFormatter',width:'100'}]});});//给窗口添加resize()监听事件/* function initTableHeight(){$(window).resize(function(){$table.bootstrapTable("resetView",{height:$(window).height()-60})});}*///格式化序号function orderFormatter(value, row, index) {var pageSize = $('#table').bootstrapTable('getOptions').pageSize;var pageNumber = $('#table').bootstrapTable('getOptions').pageNumber;return pageSize * (pageNumber - 1) + index + 1;}// 格式化时间function timeFormatter(value, row, index) {var date = new Date(value);//时间戳为10位需*1000，时间戳为13位的话不需乘1000Y = date.getFullYear();M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1);D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();return Y+"-"+M+"-"+D+" "+h+":"+m+":"+s;};// 格式化操作按钮function actionFormatter(value, row, index) {return ["<a class=\"update\" href=\"javascript:;\" οnclick=\"updateAction('"+row.id+"')\" data-toggle=\"tooltip\" title=\"编辑\"><i class=\"glyphicon glyphicon-edit\"></i></a>  ","<a class=\"delete\" href=\"javascript:;\" οnclick=\"deleteAction('"+row.id+"')\" data-toggle=\"tooltip\" title=\"删除\"><i class=\"glyphicon glyphicon-remove\"></i></a>  ",].join('');}// 格式化状态function statusFormatter(value, row, index) {if (value == 1) {return '<span class="label label-success">上线</span>';} else {return '<span class="label label-default">下线</span>';}}// 格式化预览图function imgFormatter(value, row, index) {if (value!=null){return '<img style="height:30px;"  src="'+value+'" />';}}// 编辑图片信息function updateAction(id) {window.location.href="${base}/cebs/imags/edit/"+id;}// 删除图片（）var deleteDialog;function deleteAction(id) {if (id!=null){deleteDialog = $.confirm({type: 'red',animationSpeed: 300,title: false,content: '确认删除该图片信息吗？',buttons: {confirm: {text: '确认',btnClass: 'waves-effect waves-button',action: function () {var ids = new Array();for (var i in rows) {ids.push(rows[i].productid);}$.ajax({type: 'delete',url: '${base}/cebs/imags/' + id,success: function(result) {if (result.code != 1) {if (result.data instanceof Array) {$.each(result.data, function(index, value) {$.confirm({theme: 'dark',animation: 'rotateX',closeAnimation: 'rotateX',title: false,content: value.errorMsg,buttons: {confirm: {text: '确认',btnClass: 'waves-effect waves-button waves-light'}}});});} else {$.confirm({theme: 'dark',animation: 'rotateX',closeAnimation: 'rotateX',title: false,content: result.data.errorMsg,buttons: {confirm: {text: '确认',btnClass: 'waves-effect waves-button waves-light'}}});}} else {deleteDialog.close();$table.bootstrapTable('refresh');}},error: function(XMLHttpRequest, textStatus, errorThrown) {$.confirm({theme: 'dark',animation: 'rotateX',closeAnimation: 'rotateX',title: false,content: textStatus,buttons: {confirm: {text: '确认',btnClass: 'waves-effect waves-button waves-light'}}});}});}},cancel: {text: '取消',btnClass: 'waves-effect waves-button'}}});}else{var rows = $table.bootstrapTable('getSelections');if (rows.length == 0) {$.confirm({title: false,content: '请至少选择一条记录！',autoClose: 'cancel|3000',backgroundDismiss: true,buttons: {cancel: {text: '取消',btnClass: 'waves-effect waves-button'}}});} else {deleteDialog = $.confirm({type: 'red',animationSpeed: 300,title: false,content: '确认删除该图片信息吗？',buttons: {confirm: {text: '确认',btnClass: 'waves-effect waves-button',action: function () {var ids = new Array();for (var i in rows) {ids.push(rows[i].id);}$.ajax({type: 'delete',url: '${base}/cebs/imags/' + ids.join("-"),success: function(result) {if (result.code != 1) {if (result.data instanceof Array) {$.each(result.data, function(index, value) {$.confirm({theme: 'dark',animation: 'rotateX',closeAnimation: 'rotateX',title: false,content: value.errorMsg,buttons: {confirm: {text: '确认',btnClass: 'waves-effect waves-button waves-light'}}});});} else {$.confirm({theme: 'dark',animation: 'rotateX',closeAnimation: 'rotateX',title: false,content: result.data.errorMsg,buttons: {confirm: {text: '确认',btnClass: 'waves-effect waves-button waves-light'}}});}} else {deleteDialog.close();$table.bootstrapTable('refresh');}},error: function(XMLHttpRequest, textStatus, errorThrown) {$.confirm({theme: 'dark',animation: 'rotateX',closeAnimation: 'rotateX',title: false,content: textStatus,buttons: {confirm: {text: '确认',btnClass: 'waves-effect waves-button waves-light'}}});}});}},cancel: {text: '取消',btnClass: 'waves-effect waves-button'}}});}}}
</script>
</body>
</html>

add页面:

<#assign base=request.contextPath/>
<!DOCTYPE HTML>
<html lang="zh-cn">
<head><base id="base" href="${base}"><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>图片管理</title>
<#include "${base}/common/head.ftl"/>
</head>
<body>
<div class="container kv-main"><div class="page-header"><h1>添加图片</h1></div><form enctype="multipart/form-data" method="post" id="uploadForm" action="/cebs/imags/add"><div class="input-group"><span class="input-group-addon">图片名称</span><input type="text" class="form-control" placeholder="" name="name"></div><br/><div class="input-group" id="centerIpGroup"><label class="input-group-addon" id="basic-addon5">上传作者</label><div class="input-group col-md-12 centerIp"><input type="text" class="form-control" id="ipInput" name="uploaduser"><#--<span class="input-group-btn"><button class="btn btn-info" type="button" data-toggle="tooltip" title="删除" id="delCenterIpGrp"><span class="glyphicon glyphicon-minus"></span></button></span>--></div><#--<button class="btn btn-info" type="button" data-toggle="tooltip" title="新增" id="addCenterIpGrpBtn" οnclick="addCenterIpGrp(this)"><span class="glyphicon glyphicon-plus"></span></button>--></div><br/><br/><div class="form-group"><span class="input-group-addon" style="border-radius: 4px;padding: 6px 12px; ">图片预览</span><div class="file-loading"><input id="fileImage" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="1" name="fileImage"></div></div><br/><br/><div><label class="radio-inline"><input type="radio" name="upstatus" id="optionsRadios3" value="1" checked> 上线</label><label class="radio-inline"><input type="radio" name="upstatus" id="optionsRadios4"  value="0"> 下线</label></div><br/><div class="input-group"><span class="input-group-addon">URL</span><input type="text" class="form-control" placeholder="" name="url"></div><br/><div class="col-lg-pull-8  pull-right"><input type="submit" class="btn btn-primary" value="确认"/><button type="button" class="btn btn-primary" οnclick="javascript:window.history.back(-1);">返回</button></div><br/><br/><br/><br/><br/><br/></form>
</div>
</body>
<#include "${base}/common/footer.ftl"/>
<script>//添加图片描述输入框项function addCenterIpGrp(obj){html = '<div class="input-group col-md-12 centerIp">'+'<input type="text" class="form-control" id="ipInput" name="description">'+'<span class="input-group-btn">'+'<button class="btn btn-info" type="button" data-toggle="tooltip" title="删除" id="delCenterIpGrp"><span class="glyphicon glyphicon-minus"></span></button>'+'</span>'+'</div>'obj.insertAdjacentHTML('beforebegin',html);}$(document).on('click','#delCenterIpGrp',function(){var el = this.parentNode.parentNode;var centerIp = $(this).parent().parent().find('#ipInput').val();if (centerIp==""){el.parentNode.removeChild(el);return;}alertify.confirm('您确定要删除选中的命令？',function(e){if(e){ el.parentNode.removeChild(el)}})})//编辑图片$("#fileImage").fileinput({language : 'zh',uploadUrl: '#', // you must set a valid URL here else you will get an errorallowedFileExtensions: ['jpg', 'png', 'gif'],maxFileSize: 1000,maxFilesNum: 10,minFileCount: 1,maxFileCount: 1, //表示允许同时上传的最大文件个数dropZoneEnabled: true,//是否显示拖拽区域showUpload:false, //是否显示上传按钮showRemove :false, //是否显示移除按钮layoutTemplates :{// actionDelete:'', //去除上传预览的缩略图中的删除图标actionUpload:''//去除上传预览缩略图中的上传图片；// actionZoom:''   //去除上传预览缩略图中的查看详情预览的缩略图标。}});$("#file-2").fileinput({language : 'zh',uploadUrl: '#', // you must set a valid URL here else you will get an errorallowedFileExtensions: ['jpg', 'png', 'gif'],overwriteInitial: false,maxFileSize: 1000,maxFilesNum: 10,minFileCount: 1,maxFileCount: 3, //表示允许同时上传的最大文件个数dropZoneEnabled: true,//是否显示拖拽区域showUpload:false, //是否显示上传按钮showRemove :false, //是否显示移除按钮layoutTemplates :{// actionDelete:'', //去除上传预览的缩略图中的删除图标actionUpload:''//去除上传预览缩略图中的上传图片；// actionZoom:''   //去除上传预览缩略图中的查看详情预览的缩略图标。}});</script>
</html>

controller:

packagecom.ccdt.amos.cwms.controller;importcom.ccdt.amos.cwms.common.constant.CebsResult;importcom.ccdt.amos.cwms.common.constant.CebsResultConstant;importcom.ccdt.amos.cwms.common.util.FileUtil;importcom.ccdt.amos.cwms.common.util.UuidUtil;importcom.ccdt.amos.cwms.domain.CebsImags;importcom.ccdt.amos.cwms.service.CebsImagsService;importorg.apache.commons.lang.StringUtils;importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.beans.factory.annotation.Value;importorg.springframework.boot.web.servlet.MultipartConfigFactory;importorg.springframework.stereotype.Controller;importorg.springframework.ui.Model;importorg.springframework.ui.ModelMap;importorg.springframework.util.MultiValueMap;importorg.springframework.web.bind.annotation.*;importorg.springframework.web.multipart.MultipartFile;importorg.springframework.web.multipart.MultipartHttpServletRequest;importjavax.servlet.http.HttpServletRequest;importjava.sql.Timestamp;importjava.text.SimpleDateFormat;importjava.util.*;/***@Author:*@Date:2018/6/1318:17*/@Controllerpublic classCebsImagsController {@AutowiredprivateCebsImagsService cebsImagsService;@Value("${my.uploadImgUrl}")privateString uploadImgUrl;@Value("${my.fieldIp}")privateString fieldIp;@Value("${my.imagsIp}")privateString imagsIp;//系统首页@RequestMapping("indexs")publicString showIndex(Model model) {return"index";}@RequestMapping(value= "/cebs/imags/index",method= RequestMethod.GET)publicString index(Model model) {return"imags/index";}//图片资源管理@RequestMapping("/cebs/imags")@ResponseBodypublicObject getAll(CebsImags cebsImags,@RequestParam(required= false,defaultValue= "0",value= "offset") intoffset,@RequestParam(required= false,defaultValue= "10",value= "limit") intlimit,@RequestParam(required= false,value= "keyword") String keyword){List<CebsImags> rows = cebsImagsService.getAll(cebsImags,offset,limit,keyword);inttotal = cebsImagsService.count(cebsImags);Map<String,Object> result = newHashMap<>();result.put("rows",rows);result.put("total",total);returnresult;}//添加页面@RequestMapping(value= "/cebs/imags/add",method= RequestMethod.GET)publicString add(Model model) {return"imags/add";}//添加图片@RequestMapping(value= "/cebs/imags/add",method= RequestMethod.POST)publicObject add(CebsImags cebsImags,HttpServletRequest request) {String name=cebsImags.getName();if(StringUtils.isNotEmpty(name)){name=name.replaceAll(",",";");}cebsImags.setName(name);/*String user=cebsImags.getUploaduser();if (StringUtils.isNotEmpty(user)){user=user.replaceAll(",",";");}cebsImags.setUploaduser(user);*/String state=cebsImags.getUpstatus();cebsImags.setUpstatus(state);Timestamp time = newTimestamp(System.currentTimeMillis());cebsImags.setUploadtime(time);MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest)request;MultiValueMap<String,MultipartFile> multiparMap = multipartRequest.getMultiFileMap();try{for(String key : multiparMap.keySet()) {List<MultipartFile> multipartFileList = (List<MultipartFile>) multiparMap.get(key);for(inti=0;i<multipartFileList.size();i++) {MultipartFile file=multipartFileList.get(i);MultipartConfigFactory factory = newMultipartConfigFactory();//文件最大限制factory.setMaxFileSize("10240KB");if(file.getSize()!=0){//获取上传文件的原始名称String originalFilename = file.getOriginalFilename();//新图片名称SimpleDateFormat formatterDate = newSimpleDateFormat("yyyyMMdd");String str = formatterDate.format(newDate());String fileName = UuidUtil.getShortUuid() + originalFilename.substring(originalFilename.lastIndexOf("."));//                        String filePath = request.getSession().getServletContext().getRealPath("uploadfiles/imags/" + str + "/");String filePath = request.getServletContext().getRealPath("/");filePath += "uploadfiles/imags/"+ str + "/";FileUtil.uploadFile(file.getBytes(),filePath,fileName);String imagePath= uploadImgUrl+"imags/"+str+"/"+fileName;if(("fileImage").equals(key)){cebsImags.setImagepath(imagePath);}if(("file").equals(key)){}}}}//添加图片cebsImagsService.addImag(cebsImags);} catch(Exception e) {e.printStackTrace();}return"redirect:/cebs/imags/index";}//删除图片信息@RequestMapping(value= "/cebs/imags/{ids}",method= RequestMethod.DELETE)@ResponseBodypublicObject delete(@PathVariable("ids") String ids) {String [] id= ids.split("-");if(null!=id&&id.length!=0){for(inti = 0;i < id.length;i++) {try{//删除图片信息cebsImagsService.deleteById(Integer.valueOf(id[i]));} catch(Exception e) {e.printStackTrace();}}}return newCebsResult(CebsResultConstant.SUCCESS,0);}//编辑图片信息页面@RequestMapping(value= "/cebs/imags/edit/{id}",method= RequestMethod.GET)publicString edit(@PathVariable("id") intid,ModelMap modelMap) {CebsImags cebsImags = cebsImagsService.selectById(id);String [] desc=cebsImags.getName().split(";");List<String> desclist=newArrayList<>();for(inti=0;i<desc.length;i++){desclist.add(desc[i]);}String img=cebsImags.getImagepath();if(StringUtils.isNotEmpty(img)){cebsImags.setImagepath(img.replace(imagsIp,fieldIp));}modelMap.put("desclist",desclist);modelMap.put("cebsImags",cebsImags);return"imags/edit";}//编辑图片信息@RequestMapping(value= "/cebs/imags/edit",method= RequestMethod.POST)publicObject edit(CebsImags cebsImags,HttpServletRequest request) {String desc=cebsImags.getName().replaceAll(",",";");cebsImags.setName(desc);String state=cebsImags.getUpstatus();cebsImags.setUpstatus(state);//根据id查询原有图片信息MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest)request;MultiValueMap<String,MultipartFile> multiparMap = multipartRequest.getMultiFileMap();try{for(String key : multiparMap.keySet()) {List<MultipartFile> multipartFileList = (List<MultipartFile>) multiparMap.get(key);for(inti=0;i<multipartFileList.size();i++) {MultipartFile file=multipartFileList.get(i);MultipartConfigFactory factory = newMultipartConfigFactory();//文件最大限制factory.setMaxFileSize("10240KB");if(file.getSize()!=0){//获取上传文件的原始名称String originalFilename = file.getOriginalFilename();//新图片名称SimpleDateFormat formatterDate = newSimpleDateFormat("yyyyMMdd");String str = formatterDate.format(newDate());String fileName = UuidUtil.getShortUuid() + originalFilename.substring(originalFilename.lastIndexOf("."));String filePath = request.getSession().getServletContext().getRealPath("uploadfiles/imags/"+ str + "/");FileUtil.uploadFile(file.getBytes(),filePath,fileName);String imagePath=uploadImgUrl+"imags/"+str+"/"+fileName;if(("fileImage").equals(key)) {cebsImags.setImagepath(imagePath);cebsImagsService.editCebsImags(cebsImags);}}else{cebsImagsService.editCebsImags(cebsImags);}}}} catch(Exception e) {e.printStackTrace();}return"redirect:/cebs/imags/index";}

aplication.properties配置

##默认域名ipmy.fieldIp=IP地址##图片管理图片展示替换ipmy.productIp=my.imagsIp=my.uploadImgUrl=http://IP地址:8081/uploadfiles/

在服务器图片存储路径这样写：

server.tomcat.basedir=/usr/local/etc/ccdt/image

要有一个配置工具类：

packagecom.ccdt.amos.cwms.common.util;importorg.springframework.boot.context.embedded.ConfigurableEmbeddedServletContainer;importorg.springframework.boot.context.embedded.EmbeddedServletContainerCustomizer;importorg.springframework.boot.context.embedded.tomcat.TomcatEmbeddedServletContainerFactory;importorg.springframework.context.annotation.Bean;importorg.springframework.context.annotation.Configuration;importjava.io.File;/*** tomcat 配置*@Author:*@Date:2018/4/12 20:22.*/@Configurationpublic classTomcatConfig {@BeanpublicEmbeddedServletContainerCustomizer createEmbeddedServletContainerCustomizer(){return newMyEmbeddedServletContainerCustomizer();}classMyEmbeddedServletContainerCustomizer implementsEmbeddedServletContainerCustomizer {public voidcustomize(ConfigurableEmbeddedServletContainer container) {TomcatEmbeddedServletContainerFactory tomcatFactory = (TomcatEmbeddedServletContainerFactory) container;String filepath="/usr/local/etc/ccdt/image";File file = newFile(filepath);if(!file.exists()){file.mkdirs();}tomcatFactory.setDocumentRoot(file);}}}

fileutil:

packagecom.ccdt.amos.cwms.common.util;importsun.misc.BASE64Decoder;importjava.awt.*;importjava.awt.image.BufferedImage;importjava.io.File;importjava.io.FileOutputStream;importjava.io.OutputStream;/***@Author:*@Date:*/public classFileUtil {public static voiduploadFile(byte[] file,String filePath,String fileName) throwsException {File targetFile = newFile(filePath);if(!targetFile.exists()){targetFile.mkdirs();}FileOutputStream out = newFileOutputStream(filePath+fileName);out.write(file);out.flush();out.close();}/*** 通过BASE64Decoder解码，并生成图片*@paramimgStr*@paramimgPath*@return*/public static  booleanimgBase64(String imgStr,String imgPath){// 对字节数组字符串进行Base64解码并生成图片if(imgStr==null){return  false;}else{try{//BASE64解码byte[] b=newBASE64Decoder().decodeBuffer(imgStr);for(inti = 0;i < b.length;++i) {if(b[i]<0){//调整异常数据b[i]+=256;}}//生成JPEG图片OutputStream outputStream=newFileOutputStream(imgPath);outputStream.write(b);outputStream.flush();outputStream.close();return true;}catch(Exception e){e.printStackTrace();return false;}}}/*** 删除单个文件*@paramfilePath被删除文件的文件名*@return单个文件删除成功返回true，否则返回false*/public static booleandeleteFile(String filePath) {booleanflag = false;File file = newFile(filePath);// 路径为文件且不为空则进行删除if(file.isFile() && file.exists()) {file.delete();System.out.println("删掉了");flag = true;}returnflag;}
//    /**//     * 旋转图片为指定角度//     *//     * @param bufferedimage//     *            目标图像//     * @param degree//     *            旋转角度//     * @return//     *///    public static BufferedImage rotateImage(final BufferedImage bufferedimage,//                                            final int degree) {//        int w = bufferedimage.getWidth();//        int h = bufferedimage.getHeight();//        int type = bufferedimage.getColorModel().getTransparency();//        BufferedImage img;//        Graphics2D graphics2d;//        (graphics2d = (img = new BufferedImage(w, h, type))//                .createGraphics()).setRenderingHint(//                RenderingHints.KEY_INTERPOLATION,//                RenderingHints.VALUE_INTERPOLATION_BILINEAR);//        graphics2d.rotate(Math.toRadians(degree), w / 2, h / 2);//        graphics2d.drawImage(bufferedimage, 0, 0, null);//        graphics2d.dispose();//        return img;//    }public staticBufferedImage rotateImage(BufferedImage src, intangel) {intsrc_width = src.getWidth(null);intsrc_height = src.getHeight(null);// calculate the new image sizeRectangle rect_des = CalcRotatedSize(newRectangle(newDimension(src_width,src_height)),angel);BufferedImage res = null;res = newBufferedImage(rect_des.width,rect_des.height,BufferedImage.TYPE_INT_RGB);Graphics2D g2 = res.createGraphics();//用于跟换背景色Graphics2D g3 = res.createGraphics();// transformg2.translate((rect_des.width- src_width) / 2,(rect_des.height- src_height) / 2);g2.rotate(Math.toRadians(angel),src_width / 2,src_height / 2);//设置画笔颜色为白色不设置怎为黑色g3.setColor(Color.WHITE);//填充背景色g3.fill(rect_des);g2.drawImage(src, null, null);returnres;}public staticRectangle CalcRotatedSize(Rectangle src, intangel) {// if angel is greater than 90 degree, we need to do some conversionif(angel >= 90) {if(angel / 90% 2== 1){inttemp = src.height;src.height= src.width;src.width= temp;}angel = angel % 90;}doubler = Math.sqrt(src.height* src.height+ src.width* src.width) / 2;doublelen = 2* Math.sin(Math.toRadians(angel) / 2) * r;doubleangel_alpha = (Math.PI- Math.toRadians(angel)) / 2;doubleangel_dalta_width = Math.atan((double) src.height/ src.width);doubleangel_dalta_height = Math.atan((double) src.width/ src.height);intlen_dalta_width = (int) (len * Math.cos(Math.PI- angel_alpha- angel_dalta_width));intlen_dalta_height = (int) (len * Math.cos(Math.PI- angel_alpha- angel_dalta_height));intdes_width = src.width+ len_dalta_width * 2;intdes_height = src.height+ len_dalta_height * 2;return newRectangle(newDimension(des_width,des_height));}
}

getip工具类：

packagecom.ccdt.amos.cwms.common.util;importcom.alibaba.fastjson.JSONObject;importorg.apache.commons.lang.StringUtils;importjava.io.BufferedReader;importjava.io.DataOutputStream;importjava.io.IOException;importjava.io.InputStreamReader;importjava.net.HttpURLConnection;importjava.net.URL;importjava.util.Map;public classGetIpSite {//获取ip地址,参数为("ip="+ip,"utf-8")publicString getIpSite(String content,String encoding){String url = "http://ip.taobao.com/service/getIpInfo.php";String result = this.getResult(url,content,encoding);StringBuffer ipSite = newStringBuffer();if(StringUtils.isNotBlank(result)){JSONObject jsonObject = JSONObject.parseObject(result);intcode = (int)jsonObject.get("code");if(code == 0) {Map<String,String> res = (Map<String,String>) jsonObject.get("data");String country = res.get("country");String region = res.get("region");String city = res.get("city");if(StringUtils.isBlank(country) && StringUtils.isBlank(region) && StringUtils.isBlank(city)){ipSite.append("获取ip地域失败...");}else{if(!country.equals("XX") && StringUtils.isNotBlank(country)) {ipSite.append(country + " ");}if(!region.equals("XX") && StringUtils.isNotBlank(region)) {ipSite.append(region + " ");}if(!city.equals("XX") && StringUtils.isNotBlank(city)) {ipSite.append(city);}}}else{ipSite.append("获取ip地域失败...");}}returnipSite.toString();}privateString getResult(String urlStr,String content,String encoding) {URL url;HttpURLConnection connection = null;try{url = newURL(urlStr);connection = (HttpURLConnection) url.openConnection();// 新建连接实例connection.setDoOutput(true);// 是否打开输出流 true|falseconnection.setDoInput(true);// 是否打开输入流true|falseconnection.setRequestMethod("GET");// 提交方法POST|GETconnection.setUseCaches(false);// 是否缓存true|falseconnection.connect();// 打开连接端口DataOutputStream out = newDataOutputStream(connection.getOutputStream());// 打开输出流往对端服务器写数据out.writeBytes(content);//往出写数据out.flush();// 刷新out.close();// 关闭输出流BufferedReader reader = newBufferedReader(newInputStreamReader(connection.getInputStream(),encoding));// 往对端写完数据对端服务器返回数据// ,以BufferedReader流来读取StringBuffer buffer = newStringBuffer();String line;while((line = reader.readLine()) != null) {buffer.append(line);}reader.close();returnbuffer.toString();} catch(IOException e) {e.printStackTrace();} finally{if(connection != null) {connection.disconnect();// 关闭连接}}return null;}
}

UUID工具类：

packagecom.ccdt.amos.cwms.common.util;importjava.util.UUID;/***@Author:*@Date:2018/6/1510:42*/public classUuidUtil {/***@return获取Uuid方法*/public staticString[] chars= newString[] { "a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"};public staticString getUuid() {String[] splits = UUID.randomUUID().toString().split("-");StringBuffer buffer = newStringBuffer();for(inti = 0;i < splits.length;i++) {buffer.append(splits[i]);}returnbuffer.toString();}public staticString getShortUuid() {StringBuffer shortBuffer = newStringBuffer();String uuid = UUID.randomUUID().toString().replace("-","");for(inti = 0;i < 8;i++) {String str = uuid.substring(i * 4,i * 4+ 4);intx = Integer.parseInt(str,16);shortBuffer.append(chars[x % 0x3E]);}returnshortBuffer.toString();}}

公共类：

packagecom.ccdt.amos.cwms.common.constant;importcom.ccdt.amos.cwms.common.base.BaseConstants;public classCebsConstant extendsBaseConstants {public static finalString CIMS_TYPE= "cims.type";}

packagecom.ccdt.amos.cwms.common.constant;importcom.ccdt.amos.cwms.common.base.BaseResult;public classCebsResult extendsBaseResult {publicCebsResult(CebsResultConstant cimsResultConstant,Object data) {super(cimsResultConstant.getCode(),cimsResultConstant.getMessage(),data);}}

packagecom.ccdt.amos.cwms.common.constant;public enumCebsResultConstant {/*** 失败*/FAILED(0,"failed"),/*** 成功*/SUCCESS(1,"success"),/*** 无效长度*/INVALID_LENGTH(10001,"Invalid length"),/*** 用户名不能为空*/EMPTY_USERNAME(10101,"Username cannot be empty"),/*** 密码不能为空*/EMPTY_PASSWORD(10102,"Password cannot be empty"),/*** 帐号不存在*/INVALID_USERNAME(10103,"Account does not exist"),/*** 密码错误*/INVALID_PASSWORD(10104,"Password error"),/*** 无效帐号*/INVALID_ACCOUNT(10105,"Invalid account"),/*** 验证码不能为空*/EMPTY_SMSCODE(10106,"SMSCODE cannot be empty"),/*** 验证码无效*/INVALID_SMSCODE(10107,"Invalid SMSCODE");public intcode;publicString message;CebsResultConstant(intcode,String message) {this.code= code;this.message= message;}public intgetCode() {returncode;}public voidsetCode(intcode) {this.code= code;}publicString getMessage() {returnmessage;}public voidsetMessage(String message) {this.message= message;}}

packagecom.ccdt.amos.cwms.common.constant;public classConstants {public classMsgCode{public static finalString EMPTY= "204";public static finalString     ERROR= "500";public static finalString     SUCCESS= "200";}public classMsgCodeText{public static finalString SUCCESS= "操作成功";public static finalString EMPTY= "参数缺失";public static finalString     ERROR= "系统异常";}
}

base类：

packagecom.ccdt.amos.cwms.common.base;/*** 统一返回结果类* Created by shuzheng on 2017/2/18.*/public classBaseResult {/*** 状态码：1成功，其他为失败*/public intcode;/*** 成功为success，其他为失败原因*/publicString message;/*** 数据结果集*/publicObject data;publicBaseResult(intcode,String message,Object data) {this.code= code;this.message= message;this.data= data;}public intgetCode() {returncode;}public voidsetCode(intcode) {this.code= code;}publicString getMessage() {returnmessage;}public voidsetMessage(String message) {this.message= message;}publicObject getData() {returndata;}public voidsetData(Object data) {this.data= data;}}

packagecom.ccdt.amos.cwms.common.base;public classBaseExample {protected booleanisPager;protected intoffset;protected intlimit;public booleanisPager() {returnisPager;}public voidsetPager(booleanisPager) {this.isPager= isPager;}public intgetOffset() {returnoffset;}public voidsetOffset(intoffset) {this.offset= offset;}public intgetLimit() {returnlimit;}public voidsetLimit(intlimit) {this.limit= limit;}
}

packagecom.ccdt.amos.cwms.common.base;public classBaseColumn {privateString columnName;privateString columnComment;publicBaseColumn(String columnName,String columnComment) {this.columnName= columnName;this.columnComment= columnComment;}publicString getColumnName() {returncolumnName;}public voidsetColumnName(String columnName) {this.columnName= columnName;}publicString getColumnComment() {returncolumnComment;}public voidsetColumnComment(String columnComment) {this.columnComment= columnComment;}@OverridepublicString toString() {return"BaseColumn{"+"columnName='"+ columnName+ '\''+", columnComment='"+ columnComment+ '\''+'}';}
}

图片上传（支持拖拽上传）及列表图片预览相关推荐

关于拖拽上传 [一个拖拽上传修改头像的流程]
拖拽是操作系统用户体验最伟大的改进之一.它让人随心所欲的操作,更符合人们的直观感受. 如今现代的浏览器已经有很多支持拖拽文件读取操作,其优点不再复述.前端时间利用拖拽改进了一下网站的头像上传流程,对其 ...
java 拖拽上传_Java swing怎么实现上传文件并支持拖拽上传
展开全部你这个复杂了,我稍微说说吧. 进度条稍微简单点,你就去看看Oracle的tutorial就行了,记得运用科学(或32313133353236313431303231363533e78988e ...
文件上传（拖拽上传）
本地上传,提前预览(图片,视频) 1.html中div标签预览显示,button标签触发上传事件. [html] view plain copy <div id="drop_area ...
类似新浪微博和google图片的HTML5实现图片拖拽上传功能
2019独角兽企业重金招聘Python工程师标准>>> 来源: http://www.lovesunlife.com/?p=315 这篇文章对google图片为蓝本就拖拽上传功能分析 ...
Nodejs express、html5实现拖拽上传（转载）
一.前言文件上传是一个比较常见的功能,传统的选择方式的上传比较麻烦,需要先点击上传按钮,然后再找到文件的路径,然后上传.给用户体验带来很大问题.html5开始支持拖拽上传的需要的api.node ...
JavaScript实现拖拽上传解析 APK 信息
点击上方蓝字,关注我们技术栈 jquery 文件上传:jquery.fileupload,github 文档 apk 文件解析:app-info-parser,github 文档参考:前端解析ip ...
vue-simple-uploader实现多文件/文件夹以及可拖拽上传
vue-simple-uploader的简单使用 1.效果图展示 2.安装 3.vue2使用(vue3使用会报错) 4.代码 vue-simple-uploader是基于simple-uploader ...
使用jQuery开发一个基于HTML5的漂亮图片拖拽上传web应用
昨天我们介绍了一款HTML5文件上传的jQuery插件:jQuery HTML5 uploader,今天我们将开发一个简单的叫upload center的图片上传程序,允许用户使用拖拽方式来上传电脑上 ...
dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库....
http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...

图片上传（支持拖拽上传）及列表图片预览

图片上传（支持拖拽上传）及列表图片预览相关推荐

最新文章

热门文章