效果如下所示：

前端：

style type=' text/CSS ' # detailTbody tr :悬停{ background : # fff} .layui-form-label { width : 110 px；} .上传者-列表{左边距-:-15px；} .上传者列表。信息{位置：相对；边距-top :-25px；背景-颜色：黑色；颜色：白色；filter: alpha(不透明度=80);-莫兹-奥帕市3360 0.5；opacity: 0.5宽度： 100像素；高度： 25px文本对齐：中心；显示器：无；} .上传者列表。手柄{位置：相对；背景-color : # ff6a 00；颜色：白色；filter: alpha(不透明度=80);-莫兹-奥帕市3360 0.5；宽度： 100像素；文本对齐：右侧；高度： 18px边距-底部：-18px；显示器：无；} .上传者列表。手柄跨度{右边距： 5px} .上传者列表。处理span :悬停{ cursor:指针；} .上传者列表。文件项目{ margin : 12px 0 15 xpadding : 1 px向左浮动：}/style div class=' layui-upload ' button type=' button ' class=' layui-BTN layui-BTN-warm ' id=' test 2 '单据上传（可上传多张)/button block quote class=' layui-elem-quote layui-quote-nm ' style=' margin-top : 10px；宽度： 88%预览图：div class=' layui-uploader-list uploader-list ' style=' overflow : auto；id=' uploader-list ' div id=' class=' file-iteme ' th :每个=' img : $ { data。命令凭单} ' div class=' handle ' I class=' layui-icon ' style=' color : white；右边距： 40%'/i/div img th : src=' http : $ { img } ' alt='单据width=' 100 ' height=' 100 ' onclick=' show big(this)'/div/div/block quote/div js:

layui.use(['form '，' layer '，' laydate '，' upload']，function(){ $=layui。jqueryvar form=layui.form，layer=layui.layer，laydate=layui.laydate，upload=layui.upload//多图片上传上传。render({ elem : ' # test2 '，url: '/psi/order/uploadImg '，multiple: true，在： function(obj){ layer之前。“msg(”图片上传中.'、{ icon: 16，shade: 0.01，time: 0 }) }、done :函数(RES){ layer。关闭(层。msg())；//关闭上传提示窗口//上传完毕$(' #上传者列表').追加(' div id=' class=' file-iteme ' ' ' div class=' handle ' I class=' layui-icon ' style=' color : white；右边距： 40%'/i/div' ' img style=' color :白色；宽度： 100像素；高度： 100px ' onclick=' ShowBig(this)' src=' RES . URL ' '/' div ')；} });});$(文档)。on('mouseenter mouseleave '，').file-iteme '，函数(事件){ if(事件。type==='鼠标输入'){//鼠标悬浮$(这个)。孩子们。信息')。fadeIn(' fast ')；$(这个)。孩子们。手柄')。fadeIn(' fast ')；} else if(事件。type==='鼠标离开'){//鼠标离开$(这个)。孩子们。信息')。hide()；$(这个)。孩子们。手柄')。hide()；} });$(文档)。打开('点击','。文件项目手柄'，函数（事件){ $(这个).父项()。移除();})})函数ShowBig(obj){ var URL=(obj。src)；var索引=图层。open({ type : 2，content: url，area: ['100% '，' 100%']，title: '单据，maxmin: true，close BTN : { 1 })；layer.full(索引);}控制器层

@RequestMapping(值='/uploadImg ')@响应体公共映射字符串，对象uploadImg(多部分文件，HttpServletRequest请求){ MapString，Object data=new HashMap()；字符串url=if(！文件。isempty()){ URL=file uploadutil。保存图像(文件，'订单凭单，请求);} data.put('url '，URL)；返回数据；}FileUploadUtil类

导入组织。弹簧框架。网络。多部分的。多部分文件；导入javax。servlet。http。HttpServletrequest导入Java。io。*;导入Java。乌提尔。日期；公共类FileUploadUtil {公共静态字符串文件上传路径网址=' d : SVN项目 微信图片打印'；/** * 图片读取存放获取路径* * @param文件文件* @param fileName文件存放的目录名* @ return */public静态String保存图像(多部分文件文件，字符串文件名，httpersvletrequest requestfileuploautil){ 0长时间戳=新日期()。getTime()；//获取时间戳字符串realPath=FileUploadPathURl//项目路径字符串新文件名=时间戳" "文件。getoriginalfilename()；//file.getOriginalFilename()是获取原始图片的拓展名，新文件名新的文件名字字符串路径=真实路径"/"文件名；字符串新路径=路径"/"新文件名；////图片存放的位置路径文件文件路径=新文件（路径'/');if(！文件路径。exists()){ filepath。mkdirs()；} if(！文件。isempty()){ bufferedoutstream out=null；尝试{ out=new BufferedOutputStream(新文件输出流（新文件（新路径)));出去。写入(文件。GetBytes())；出去。flush()；出去。close()；} catch(FileNotFoundException e){ e . printStackTrace()；} catch(IOexception e){ e . print stack trace()；} }字符串URL=requestfileuploautil。getscheme()' ://' request fileuploautil。getservername()' : ' requestfileuploautil。getserver port()' requestfileuploautil。getcontextpath()'/' FIlename '/new FIlename；返回url}}yml虚拟路径配置

spring : resources : static-locations :类路径：/META-INF/resources/，classpath:/resources/，classpath:/static/，classpath:/public/，文件3: $ { web。上传路径} web :上传路径：d :/SVN项目/微信打印图片以上这篇获得实现图片虚拟路径上传，预览和删除的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。