layui实现图片虚拟路径上传,预览和删除的例子

效果如下所示：前端：<styletype="text/css">#detailTbodytr:hover{background:#fff;}.layui-form-label{width:

效果如下所示：

前端：

<style type="text/css">
 #detailTbody tr:hover {
 background: #fff;
 }

 .layui-form-label {
 width: 110px;
 }

 .uploader-list {
 margin-left: -15px;
 }

 .uploader-list .info {
 position: relative;
 margin-top: -25px;
 background-color: black;
 color: white;
 filter: alpha(Opacity=80);
 -moz-opacity: 0.5;
 opacity: 0.5;
 width: 100px;
 height: 25px;
 text-align: center;
 display: none;
 }

 .uploader-list .handle {
 position: relative;
 background-color: #ff6a00;
 color: white;
 filter: alpha(Opacity=80);
 -moz-opacity: 0.5;
 width: 100px;
 text-align: right;
 height: 18px;
 margin-bottom: -18px;
 display: none;
 }

 .uploader-list .handle span {
 margin-right: 5px;
 }

 .uploader-list .handle span:hover {
 cursor: pointer;
 }

 .uploader-list .file-iteme {
 margin: 12px 0 0 15px;
 padding: 1px;
 float: left;
 }
</style>
 <div class="layui-upload">
 
 <button type="button" class="layui-btn layui-btn-warm" id="test2">单据上传（可上传多张）</button>
 <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;width: 88%">
 预览图：
 
 <div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-list">
 <div id="" class="file-iteme" th:each="img :${data.orderVoucher}">
 <div class="handle"><i class="layui-icon" style="color: white;margin-right: 40%"></i>
 </div>
 <img th:src="${img}" alt="单据" width="100" height="100" onclick="showBig(this)">
 </div>
 
 </div>
 </blockquote>
 </div>

js：

 layui.use(['form', 'layer', 'laydate', 'upload'], function () {
 $ = layui.jquery;
 var form = layui.form,
 layer = layui.layer,
 laydate = layui.laydate,
 upload = layui.upload;
 //多图片上传
 upload.render({
 elem: '#test2'
 , url: '/psi/order/uploadImg'
 , multiple: true
 , before: function (obj) {
 layer.msg('图片上传中...', {
 icon: 16,
 shade: 0.01,
 time: 0
 })
 }
 , done: function (res) {
 layer.close(layer.msg());//关闭上传提示窗口
 //上传完毕
 $('#uploader-list').append(
 '<div id="" class="file-iteme">' +
 '<div class="handle"> <i class="layui-icon" style="color: white ;margin-right: 40%"></i></div>' +
 '<img style="color: white;width: 100px;height: 100px" onclick="showBig(this)" src=' + res.url + ' >' +
 '</div>'
 );
 }
 });
 });

 $(document).on("mouseenter mouseleave", ".file-iteme", function (event) {
 if (event.type === "mouseenter") {
 //鼠标悬浮
 $(this).children(".info").fadeIn("fast");
 $(this).children(".handle").fadeIn("fast");
 } else if (event.type === "mouseleave") {
 //鼠标离开
 $(this).children(".info").hide();
 $(this).children(".handle").hide();
 }
 });
 $(document).on("click", ".file-iteme .handle", function(event){
 $(this).parent().remove();
 })
})
function showBig(obj) {
 var url = (obj.src);
 var index = layer.open({
 type: 2,
 content: url,
 area: ['100%', '100%'],
 title: "单据",
 maxmin: true,
 closeBtn: 1
 });
 layer.full(index);
}

controller层

 @RequestMapping(value = "/uploadImg")
 @ResponseBody
 public Map<String,Object> uploadImg(MultipartFile file,HttpServletRequest request){
 Map<String,Object> data = new HashMap<>();
 String url = "";
 if (!file.isEmpty()){
 url = FileUploadUtil.saveImage(file,"orderVoucher",request);
 }
 data.put("url",url);
 return data;
 }

FileUploadUtil类

import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.*;
import java.util.Date;

public class FileUploadUtil {

 public static String fileUploadPathUrl="D:\\svnproject\\wechatprintingPicture";

 /**
 * 图片读取存放获取路径
 *
 * @param file 文件
 * @param fileName 文件存放的目录名
 * @return
 */
 public static String saveImage(MultipartFile file, String fileName, HttpServletRequest requestFileUploadUtil) {
 long timestamp = new Date().getTime();//获取时间戳
 String realPath = fileUploadPathUrl;//项目路径
 String newFileName = timestamp + "" + file.getOriginalFilename(); //file.getOriginalFilename()是获取原始图片的拓展名，newfileName新的文件名字
 String path = realPath + "/" + fileName;
 String newPath = path + "/" + newFileName;////图片存放的位置路径
 File filePath = new File(path + "/");
 if (!filePath.exists()) {
 filePath.mkdirs();
 }
 if (!file.isEmpty()) {
 BufferedOutputStream out = null;
 try {
 out = new BufferedOutputStream(
 new FileOutputStream(new File(newPath)));
 out.write(file.getBytes());
 out.flush();
 out.close();
 } catch (FileNotFoundException e) {
 e.printStackTrace();
 } catch (IOException e) {
 e.printStackTrace();
 }
 }
 String url = requestFileUploadUtil.getScheme() + "://" + requestFileUploadUtil.getServerName() + ":" + requestFileUploadUtil.getServerPort() + requestFileUploadUtil.getContextPath() + "/" + fileName + "/" + newFileName;
 return url;
 }
}

yml虚拟路径配置

spring:
 resources:
 static-locations: classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,file:${web.uploadPath}

web:
 uploadPath: D:/svnproject/wechatprintingPicture

以上这篇layui实现图片虚拟路径上传,预览和删除的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。