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


Posted in Javascript onSeptember 25, 2019

效果如下所示:

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

前端:

<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实现图片虚拟路径上传,预览和删除的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
实测jquery data()如何存值
Aug 18 Javascript
jquery中event对象属性与方法小结
Dec 18 Javascript
For循环中分号隔开的3部分的执行顺序探讨
May 27 Javascript
javascript去除空格方法小结
May 21 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
Jan 19 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
js实现简单的网页换肤效果
Jan 18 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
Jan 16 Javascript
vue使用xe-utils函数库的具体方法
Mar 06 Javascript
redux.js详解及基本使用
May 24 Javascript
JS获取动态添加元素的方法详解
Jul 31 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
Sep 25 #Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
Sep 25 #Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
Sep 25 #Javascript
vue+axios实现post文件下载
Sep 25 #Javascript
vue + axios get下载文件功能
Sep 25 #Javascript
layer.open组件获取弹出层页面变量、函数的实例
Sep 25 #Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 #jQuery
You might like
php图片验证码代码
2008/03/27 PHP
php数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
javascript 处理HTML元素必须避免使用的一种方法
2009/07/30 Javascript
jquery each()源代码
2011/02/14 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
js 显示base64编码的二进制流网页图片
2014/04/04 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
js+css3实现旋转效果
2017/01/20 Javascript
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
2019/12/30 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
简介Django中内置的一些中间件
2015/07/24 Python
Python两个内置函数 locals 和globals(学习笔记)
2016/08/28 Python
Flask之请求钩子的实现
2018/12/23 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
HTML5中如何显示视频呢 HTML5视频播放demo
2013/06/08 HTML / CSS
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
澳大利亚男士西服品牌:M.J.Bale
2018/02/06 全球购物
产品销售员岗位职责
2013/12/18 职场文书
党员批评与自我批评
2014/02/12 职场文书
家居装修公司创业计划书范文
2014/03/20 职场文书
一年级学生期末评语
2014/04/21 职场文书
房地产营销活动策划方案
2014/09/15 职场文书
优秀党员先进事迹材料2016
2016/02/29 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书
Python OpenCV快速入门教程
2021/04/17 Python
什么是css原子化,有什么用?
2022/04/24 HTML / CSS