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 加上最后自己的验证
Nov 04 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
May 14 Javascript
jQuery 源码分析笔记(7) Queue
Jun 19 Javascript
JS替换字符串中空格方法
Apr 17 Javascript
JS中完美兼容各大浏览器的scrolltop方法
Apr 17 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
Apr 21 Javascript
基于javascript实现窗口抖动效果
Jan 03 Javascript
浅谈jquery的map()和each()方法
Jun 12 Javascript
Bootstrap基本组件学习笔记之导航(10)
Dec 07 Javascript
node.js操作MongoDB的实例详解
Oct 11 Javascript
vue 1.x 交互实现仿百度下拉列表示例
Oct 21 Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 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 session 错误
2009/05/21 PHP
PHP页面转UTF-8中文编码乱码的解决办法
2015/10/20 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
分享一个asp.net pager分页控件
2012/01/04 Javascript
JS中的public和private对象,即static修饰符
2012/01/18 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
js简单的弹出框有关闭按钮
2014/05/05 Javascript
javascipt:filter过滤介绍及使用
2014/09/10 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
2016/05/10 Javascript
轮播图组件js代码
2016/08/08 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
javascript 注释代码的几种方法总结
2017/01/04 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
jQuery实现一个简单的验证码功能
2017/06/26 jQuery
详解ES6中的代理模式——Proxy
2018/01/08 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
js的对象与函数详解
2019/01/21 Javascript
python根据时间生成mongodb的ObjectId的方法
2015/03/13 Python
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
Django之模型层多表操作的实现
2019/01/08 Python
python中自带的三个装饰器的实现
2019/11/08 Python
django admin 添加自定义链接方式
2020/03/11 Python
python os模块在系统管理中的应用
2020/06/22 Python
Django ORM判断查询结果是否为空,判断django中的orm为空实例
2020/07/09 Python
悦木之源美国官网:Origins美国
2016/08/01 全球购物
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
ASICS印度官方网站:日本专业运动品牌
2020/06/20 全球购物
《我要的是葫芦》教学反思
2014/02/23 职场文书
内衣营销方案
2014/03/15 职场文书
品质标语大全
2014/06/21 职场文书
应用外语系自荐信
2014/06/26 职场文书
2014年预备党员群众路线教育实践活动对照检查材料思想汇报
2014/10/02 职场文书
自主招生自荐信怎么写
2015/03/24 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书