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 UrlDecode函数代码
Jan 09 Javascript
Jquery之美中不足小结
Feb 16 Javascript
js 遍历对象的属性的代码
Dec 29 Javascript
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 Javascript
js给onclick赋值传参数的两种方法
Nov 25 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 Javascript
uploadify多文件上传参数设置技巧
Nov 16 Javascript
js实现滚动条滚动到页面底部继续加载
Dec 19 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
Sep 06 Javascript
ES6 Promise对象概念与用法分析
Apr 01 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
Aug 08 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
图象函数中的中文显示
2006/10/09 PHP
PHP 5.3新增魔术方法__invoke概述
2014/07/23 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
thinkPHP框架实现图像裁剪、缩放、加水印的方法
2017/03/14 PHP
PHP递归的三种常用方式
2019/02/28 PHP
PHP时间函数使用详解
2019/03/21 PHP
jQuery开发者都需要知道的5个小技巧
2010/01/08 Javascript
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
php与js的区别是什么
2013/08/05 Javascript
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
jQuery圆形统计图开发实例
2015/01/04 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
2016/05/10 Javascript
Javascript前端经典的面试题及答案
2017/03/14 Javascript
jQuery - AJAX load() 实例用法详解
2019/08/27 jQuery
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
Python with语句上下文管理器两种实现方法分析
2018/02/09 Python
Python语言快速上手学习方法
2018/12/14 Python
Python动态语言与鸭子类型详解
2019/07/01 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
Python pip 安装与使用(安装、更新、删除)
2019/10/06 Python
Python实现清理微信僵尸粉功能示例【基于itchat模块】
2020/05/29 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
聊聊Python pandas 中loc函数的使用,及跟iloc的区别说明
2021/03/03 Python
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
Expedia爱尔兰:酒店、机票、租车及廉价假期
2017/01/02 全球购物
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
加拿大租车网站:Enterprise Rent-A-Car
2018/07/26 全球购物
介绍一下SOA和SOA的基本特征
2016/02/24 面试题
母亲追悼会答谢词
2014/01/27 职场文书
三好学生个人先进事迹材料
2014/05/17 职场文书
大学计划书范文800字
2014/08/14 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书
jquery插件实现图片悬浮
2021/04/16 jQuery
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python