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 相关文章推荐
Javascript的getYear、getFullYear、getUTCFullYear异同分享
Nov 30 Javascript
DIV+CSS+JS不间断横向滚动实现代码
Mar 19 Javascript
动态加载jquery库的方法
Feb 12 Javascript
javascript随机之洗牌算法深入分析
Jun 07 Javascript
json属性名为什么要双引号(个人猜测)
Jul 31 Javascript
jQuery学习笔记之Ajax用法实例详解
Dec 01 Javascript
javascript的函数劫持浅析
Sep 26 Javascript
JS数组排序方法实例分析
Dec 16 Javascript
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
微信小程序websocket聊天室的实现示例代码
Feb 12 Javascript
细说Vue组件的服务器端渲染的过程
May 30 Javascript
vue中typescript装饰器的使用方法超实用教程
Jun 17 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,不用COM,生成excel文件
2006/10/09 PHP
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
phplist及phpmailer(组合使用)通过gmail发送邮件的配置方法
2016/03/30 PHP
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
2013/03/18 Javascript
JS实现简单的Canvas画图实例
2013/07/04 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
JavaScript将一个数组插入到另一个数组的方法
2015/03/19 Javascript
AngularJS教程之环境设置
2016/08/16 Javascript
AngularJS入门教程之REST和定制服务详解
2016/08/19 Javascript
LayerClose弹窗关闭刷新方法
2018/08/17 Javascript
js实现导航跟随效果
2018/11/17 Javascript
BootStrap modal实现拖拽功能
2018/12/01 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
python基础教程之自定义函数介绍
2014/08/29 Python
Python获取运行目录与当前脚本目录的方法
2015/06/01 Python
python 迭代器和iter()函数详解及实例
2017/03/21 Python
详谈在flask中使用jsonify和json.dumps的区别
2018/03/26 Python
Django 使用Ajax进行前后台交互的示例讲解
2018/05/28 Python
python画图常规设置方式
2020/03/05 Python
python中altair可视化库实例用法
2021/01/26 Python
利用css3 translate完美实现表头固定效果
2017/02/28 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
中软国际Java程序员笔试题
2014/07/19 面试题
大学生求职简历的自我评价范文
2013/10/12 职场文书
优秀干部获奖感言
2014/01/31 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
总结Java对象被序列化的两种方法
2021/06/30 Java/Android
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL
threejs太阳光与阴影效果实例代码
2022/04/05 Javascript