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 this调用规则说明
Mar 08 Javascript
jquery dialog键盘事件代码
Aug 01 Javascript
javascript遍历控件实例详细解析
Jan 10 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
Jun 15 Javascript
Angular2 组件间通过@Input @Output通讯示例
Aug 24 Javascript
最新Javascript程序员面试试题和解题方法
Nov 23 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 Javascript
vue+canvas实现移动端手写签名
May 21 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
Jul 20 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/01/07 PHP
PHPMailer 中文使用说明小结
2010/01/22 PHP
PHP系列学习之日期函数使用介绍
2012/08/18 PHP
JS批量修改PS中图层名称的方法
2014/01/26 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
2014/04/25 Javascript
jQuery判断元素是否存在的可靠方法
2014/05/06 Javascript
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
JS中的==运算: [''] == false —&gt;true
2016/07/24 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
python logging日志模块的详解
2017/10/29 Python
通过Pandas读取大文件的实例
2018/06/07 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
python实现最大子序和(分治+动态规划)
2019/07/05 Python
python 将日期戳(五位数时间)转换为标准时间
2019/07/11 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
python实现无边框进度条的实例代码
2020/12/30 Python
Harman Audio官方商店:购买JBL、Harman Kardon、Infinity和AKG
2019/12/05 全球购物
表彰先进集体通报
2014/01/12 职场文书
校友会欢迎辞
2014/01/13 职场文书
学习雷锋活动总结
2014/04/29 职场文书
小组名称和口号
2014/06/09 职场文书
工作散漫检讨书
2014/09/16 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
门市房租房协议书
2014/12/04 职场文书
申报优秀教师材料
2014/12/16 职场文书
元旦主持词开场白
2015/05/29 职场文书
升学宴来宾致辞
2015/07/27 职场文书
2015年国庆节标语大全
2015/07/30 职场文书
创业计划书之服装
2019/10/07 职场文书
Python 多线程之threading 模块的使用
2021/04/14 Python
Python数据分析入门之教你怎么搭建环境
2021/05/13 Python
HTML页面中使两个div并排显示的实现
2022/05/15 HTML / CSS