前端动态获取servlet虚拟路径_layui实现图片虚拟路径上传,预览和删除的例子

效果如下所示：

前端：

#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;

}

单据上传(可上传多张)

预览图：



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(

'

' +

'



' +

'' +

'

'

);

}

});

});

$(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 uploadImg(MultipartFile file,HttpServletRequest request){

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

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

本文地址: http://www.cppcns.com/wangluo/javascript/276201.html