这篇文章给大家分享的是有关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" >
预览图:
<div class="layui-upload-list uploader-list" id="uploader-list">
<div id="" class="file-iteme" th:each="img :${data.orderVoucher}">
<div class="handle"><i class="layui-icon" ></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" ></i></div>' +
'<img 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中如何实现图片虚拟路径上传功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。