1.前端layui + 后端ssm
效果图:
1.前端页面 jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title></title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<%-- 引用layui.css --%>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
</head>
<style type="text/css">
.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: black;
color: white;
filter: alpha(Opacity=80);
-moz-opacity: 0.5;
opacity: 0.5;
width: 100px;
text-align: right;
height: 18px;
margin-bottom: -18px;
display: none;
}
.uploader-list .handle i {
margin-right: 5px;
}
.uploader-list .handle i:hover {
cursor: pointer;
}
.uploader-list .file-iteme {
margin: 12px 0 0 15px;
padding: 1px;
float: left;
}
</style>
<%--<script type="text/javascript" src="/js/uploadA.js"></script>--%>
<body>
<div class="layui-upload">
<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>
</blockquote>
<button type="button" class="layui-btn" id="test2" style="margin-left: 20px">多图片上传</button>
<button type="button" class="layui-btn" id="addImg">提交</button>
</div>
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="layui/layui.all.js"></script>
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="layui/lay/modules/table.js"></script>
<script type="text/javascript">
function createXmlHttpRequest() {
if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
}
function HttpResultCallBak(iRestStr) {
if(JSON.parse(iRestStr).code==300){
// alert("上传失败:"+JSON.parse(iRestStr).msg)
parent.layer.msg(JSON.parse(iRestStr).msg,{icon : 5, time : 3000});
}else{
//关闭当前页面
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
parent.layer.msg("上传成功",{icon : 6, time : 3000});
}
}
</script>
<script type="text/javascript">
layui.config({
base: "<%=basePath%>/layui/lay/modules/"
}).use(["common", "element", "layer", "form", "table", "laydate", "jquery","layedit"], function(){
var elem = layui.element;
var layer = layui.layer;
var form = layui.form;
var table = layui.table;
var layedit = layui.layedit;
var $ = layui.jquery;
var upload = layui.upload;
layui.common.init();
var curWwwPath = window.document.location.href;
console.log(curWwwPath,'curWwwPath')
// 获取主机地址之后的目录,如: /project/modules/map/index.html
var pathName = window.document.location.pathname;
console.log(pathName,'pathName')
var pos = curWwwPath.indexOf(pathName);
console.log(pos,'pos')
// 获取主机地址,如: http://localhost:8080
var localhostPaht = curWwwPath.substring(0, pos);
console.log(localhostPaht,'localhostPaht')
// 获取带"/"的项目名,如:/project/
var projectName = pathName.substring(0,pathName.substr(1).indexOf('/') + 2);
console.log(projectName,'projectName')
//获取根路径,如:http://localhost:8080/project/
var baseURL = localhostPaht + projectName;
console.log(baseURL,'baseURL');
var fileList=new Array();
var imgListUp=new Array();
upload.render({
elem: '#test2'
,url: 'ERP/imageList.do' //改成自己的上传入口(这一块可以后台随便写一个,只要不报错就行) 后端代码A
,multiple: true
,before: function(obj){
obj.preview(function (index, file, result) {
// $('#demo2').append('<img src="' + result + '" alt="' + file.name + '" style="width:30%;" class="layui-upload-img">')
$('#uploader-list').append(
'<div id="" class="file-iteme">' +
'<div class="handle"><i class="layui-icon layui-icon-delete"></i></div>' +
'<img class="img" style="width: 100px;height: 100px;" data-index='+index+' data-name='+file.name+' src='+ result +'>' +
'<div class="info">' + file.name + '</div>' +
'</div>'
);
// console.log(file,"file")
var map =new Map();//将选择的图片索引和图片写成对象存入集合
map.index=index;
map.file=file;
fileList.push(map);
});
}
});
$(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){
var index = $(this).next().attr('data-index');
// console.log(index,'data-index');
$.each(fileList,function(inx,ele){
//对比删除图片索引
//将未删除的存入新集合
if(index != ele.index){
imgListUp.push(ele);
}
});
$(this).parent().remove();
// console.log(JSON.stringify(imgListUp),"imgListUp");
//将新图片集合替换老集合
fileList=imgListUp;
});
//提交上传图片
$("#addImg").click(function() {
console.log(JSON.stringify(fileList));
//OK
if(fileList.length<3 || fileList.length>9){
layer.msg("最少3张,最多9张")
return false;
}
var fm = document.forms[0];
var form = new FormData(fm);
//遍历最终图片集合
for( var i = 0; i< fileList.length ; i ++){
form.append("file[]", fileList[i].file)
}
form.append("house_type", '${house_type}');
form.append("billno",'${billno}');
form.append("image", '${image}');
var xmlHttpRequest = createXmlHttpRequest(); // XMLHttpRequest
xmlHttpRequest.open("post", baseURL +'ERP/wdUploadImgInvoice2.do', true); //post 后端接口
//必须调用函数才能取到返回结果 console是无法调起的
xmlHttpRequest.onreadystatechange = function () {
if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
var iRestStr = xmlHttpRequest.responseText;
HttpResultCallBak(iRestStr);
}
};
xmlHttpRequest.send(form);
});
})
</script>
</body>
</html>
2.后端controller
2.后端代码A 其实这款只需要写一个接口就行,无需任何返回,只不过layui的upload必须要有url
@RequestMapping("/imageList.do")
@ResponseBody
public Map imageList() throws Exception {
Map map = new HashMap();
map.put("code", 200);
map.put("msg", "照片正确");
return map;
}
后端代码B:返回结果可以自己按照自己代码规范,切结js提交时候返回的结果字符串需要自己解析
@RequestMapping(value = "/wdUploadImgInvoice2.do", headers = "content-type=multipart/form-data")
@ResponseBody
public Result wdUploadImgInvoice2(HttpServletRequest request, @RequestParam("file[]") MultipartFile[] files) {
Result rs = new Result();
String house_type = request.getParameter("house_type");
String billno = request.getParameter("billno");
String image = request.getParameter("image");
logger.error("wdUploadImgInvoice2--house_type:{},billno:{},image:{}", house_type, billno, image);
try {
Map map = new HashMap();
//传入图片集合
rs = AliyunOssUntil.uploadImg2OssListErpBillno(files);
if (300 == rs.getCode()) {
return rs;
}
JSONArray array = JSONArray.parseArray(image);
for (Object datum : rs.getData()) {
array.add(datum.toString().replaceAll("\"",""));
}
map.put("house_type", house_type);
map.put("billno", billno);
map.put("image", array.toString());
erpOrderService.updateBillnoImage(map);
} catch (Exception e) {
logger.error("wdUploadImgInvoice2.do=", e);
rs.setCode(300);
rs.setMsg("系统错误");
e.printStackTrace();
}
return rs;
}
Result:
后端代码C:
public class Result {
private Integer code;
private String msg;
private Integer count;
private List<?> data;
public Result(){
}
public Result(Integer count, List<?> data){
this.code = 0;
this.msg = "";
this.count = count;
this.data = data;
}
public Result(Integer code, String msg, Integer count, List<?> data){
this.code = code;
this.msg = msg;
this.count = count;
this.data = data;
}
public Result(Integer code, String msg){
this.code = code;
this.msg = msg;
}
public Integer getCode() {
return code;
}
public void setCode(Integer code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public Integer getCount() {
return count;
}
public void setCount(Integer count) {
this.count = count;
}
public List<?> getData() {
return data;
}
public void setData(List<?> data) {
this.data = data;
}
}
AliyunOssUntil:
package com.jp.zczy.util;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.aliyun.oss.OSSClient;
import com.common.util.DateUtil;
import com.common.util.Result;
import com.google.gson.JsonObject;
//import com.itextpdf.text.pdf.PdfDocument;
import org.apache.pdfbox.pdmodel.PDDocument;
import org.apache.pdfbox.rendering.PDFRenderer;
import org.apache.poi.util.IOUtils;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;
import org.springframework.web.multipart.MultipartFile;
import com.aliyun.oss.model.ObjectMetadata;
import com.aliyun.oss.model.PutObjectResult;
import java.awt.image.BufferedImage;
import java.io.*;
import java.net.URL;
import java.util.*;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.apache.commons.lang.StringUtils;
import sun.misc.BASE64Decoder;
import javax.imageio.ImageIO;
import javax.imageio.stream.ImageOutputStream;
/**
* @author uncle
* @data 2021年09月24日14:18
*/
public class AliyunOssUntil {
public static final String endpoint = "https://oss-cn-hangzhou.aliyuncs.com";
public static final String accessKeyId = "accessKeyId ";
public static final String accessKeySecret = "accessKeySecret ";
public static final String bucketName = "bucketName";
protected static final Logger log = LoggerFactory.getLogger(AliyunOssUntil.class);
// public static OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
//文件存储目录
private static String filedir = "image/" + DateUtil.getDay() + "/";
private static String filedir_cbs = "cbs/" + DateUtil.getDay() + "/";
/**
* 上传图片
*
* @param file
* @return
*/
public String uploadImg2Oss(MultipartFile file) {
if (file.getSize() > 1024 * 1024 * 20) {
return "图片太大";//RestResultGenerator.createErrorResult(ResponseEnum.PHOTO_TOO_MAX);
}
String originalFilename = file.getOriginalFilename();
String substring = originalFilename.substring(originalFilename.lastIndexOf(".")).toLowerCase();
Random random = new Random();
String name = random.nextInt(10000) + System.currentTimeMillis() + substring;
System.out.println("name:" + name);
try {
InputStream inputStream = file.getInputStream();
this.uploadFile2OSS(inputStream, name);
return name;//RestResultGenerator.createSuccessResult(name);
} catch (Exception e) {
return "上传失败";//RestResultGenerator.createErrorResult(ResponseEnum.PHOTO_UPLOAD);
}
}
public static Map uploadImg2OssInvoice(MultipartFile file, String imgName) {
Map map = new HashMap();
if (file.getSize() > 1024 * 1024 * 20) { //20M
map.put("code", 300);
map.put("msg", "图片太大");
return map;
}
// String name = file.getOriginalFilename();
try {
InputStream inputStream = file.getInputStream();
uploadFile2OSS(inputStream, imgName);
map.put("code", 200);
map.put("msg", "上传成功");
String url = filedir + imgName;
map.put("url", url);
return map;
} catch (Exception e) {
map.put("code", 300);
map.put("msg", "上传失败");
return map;
}
}
public static Result uploadImg2OssList(MultipartFile[] file) {
Result rs = new Result();
ArrayList<String> list = new ArrayList();
try {
for (int i = 0; i < file.length; i++) {
if (file[i].getSize() > 1024 * 1024 * 20) {
rs.setCode(300);
rs.setMsg("第" + i + "张图片太大");
return rs;
}
String originalFilename = file[i].getOriginalFilename();
// String name = DateUtil.getDay() + originalFilename;
InputStream inputStream = file[i].getInputStream();
uploadFile2OSS(inputStream, originalFilename);
list.add("\"" + filedir + originalFilename + "\"");
}
System.out.println("imgList:" + list);
rs.setCode(200);
rs.setMsg("上传成功");
rs.setData(list);
} catch (Exception e) {
rs.setCode(300);
rs.setMsg("上传失败");
e.getMessage();
}
return rs;
}
public static Result uploadImg2OssListErpBillno(MultipartFile[] file) {
Result rs = new Result();
ArrayList<String> list = new ArrayList();
try {
for (int i = 0; i < file.length; i++) {
if (file[i].getSize() > 1024 * 1024 * 20) {
rs.setCode(300);
rs.setMsg("第" + i + "张图片太大");
return rs;
}
String originalFilename = file[i].getOriginalFilename();
String extName = originalFilename.substring(originalFilename
.lastIndexOf(".") + 1);
if ("png".equalsIgnoreCase(extName)
|| "gif".equalsIgnoreCase(extName)
|| "jpg".equalsIgnoreCase(extName)
|| "bmp".equalsIgnoreCase(extName)
|| "jpeg".equalsIgnoreCase(extName)) {
} else {
rs.setCode(300);
rs.setMsg("照片格式不正确");
return rs;
}
String name = DateUtil.getTimes() +'.'+extName;
InputStream inputStream = file[i].getInputStream();
// uploadFile2OSS(inputStream, originalFilename);
uploadFile2OSS(inputStream, name);
list.add("\"" + filedir + name + "\"");
}
System.out.println("imgList:" + list);
rs.setCode(200);
rs.setMsg("上传成功");
rs.setData(list);
} catch (Exception e) {
rs.setCode(300);
rs.setMsg("上传失败");
e.getMessage();
}
return rs;
}
/**
* 上传图片获取fileUrl
*
* @param instream
* @param fileName
* @return
*/
private static String uploadFile2OSS(InputStream instream, String fileName) {
String ret = "";
OSSClient ossClient = null;
try {
//创建上传Object的Metadata
ObjectMetadata objectMetadata = new ObjectMetadata();
objectMetadata.setContentLength(instream.available());
objectMetadata.setCacheControl("no-cache");
objectMetadata.setHeader("Pragma", "no-cache");
objectMetadata.setContentType(getcontentType(fileName.substring(fileName.lastIndexOf("."))));
objectMetadata.setContentDisposition("inline;filename=" + fileName);
//上传文件
ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);
PutObjectResult putResult = ossClient.putObject(bucketName, filedir + fileName, instream, objectMetadata);
ret = putResult.getETag();
System.out.println("\"" + filedir + fileName + "\"");
} catch (IOException e) {
log.error(e.getMessage(), e);
} finally {
try {
if (instream != null) {
instream.close();
ossClient.shutdown();
}
} catch (IOException e) {
e.printStackTrace();
}
}
return ret;
}
/**
* 上传图片获取fileUrl
* CBS
*
* @param instream
* @param fileName
* @return
*/
private static String uploadFile2OSS_CBS(InputStream instream, String fileName) {
String url = "";
OSSClient ossClient = null;
try {
//创建上传Object的Metadata
ObjectMetadata objectMetadata = new ObjectMetadata();
objectMetadata.setContentLength(instream.available());
objectMetadata.setCacheControl("no-cache");
objectMetadata.setHeader("Pragma", "no-cache");
objectMetadata.setContentType(getcontentType(fileName.substring(fileName.lastIndexOf("."))));
objectMetadata.setContentDisposition("inline;filename=" + fileName);
//上传文件
ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);
PutObjectResult putResult = ossClient.putObject(bucketName, filedir_cbs + fileName, instream, objectMetadata);
} catch (IOException e) {
log.error(e.getMessage(), e);
} finally {
try {
if (instream != null) {
instream.close();
ossClient.shutdown();
}
} catch (IOException e) {
e.printStackTrace();
}
}
return url = filedir_cbs + fileName;
}
/**
* 上传图片获取fileUrl
* @param instream
* @param fileName
* @return
*/
private static String uploadFileBase64(ByteArrayInputStream instream, String fileName) {
String url = "";
OSSClient ossClient = null;
try {
//创建上传Object的Metadata
ObjectMetadata objectMetadata = new ObjectMetadata();
objectMetadata.setContentLength(instream.available());
objectMetadata.setCacheControl("no-cache");
objectMetadata.setHeader("Pragma", "no-cache");
objectMetadata.setContentType(getcontentType(fileName.substring(fileName.lastIndexOf("."))));
objectMetadata.setContentDisposition("inline;filename=" + fileName);
//上传文件
ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);
PutObjectResult putResult = ossClient.putObject(bucketName, filedir + fileName, instream, objectMetadata);
} finally {
try {
if (instream != null) {
instream.close();
ossClient.shutdown();
}
} catch (IOException e) {
e.printStackTrace();
}
}
return url = filedir + fileName;
}
public static String getcontentType(String FilenameExtension) {
if (FilenameExtension.equalsIgnoreCase(".bmp")) {
return "image/bmp";
}
if (FilenameExtension.equalsIgnoreCase(".gif")) {
return "image/gif";
}
if (FilenameExtension.equalsIgnoreCase(".jpeg") ||
FilenameExtension.equalsIgnoreCase(".jpg") ||
FilenameExtension.equalsIgnoreCase(".png")) {
return "image/jpeg";
}
if (FilenameExtension.equalsIgnoreCase(".html")) {
return "text/html";
}
if (FilenameExtension.equalsIgnoreCase(".txt")) {
return "text/plain";
}
if (FilenameExtension.equalsIgnoreCase(".vsd")) {
return "application/vnd.visio";
}
if (FilenameExtension.equalsIgnoreCase(".pptx") ||
FilenameExtension.equalsIgnoreCase(".ppt")) {
return "application/vnd.ms-powerpoint";
}
if (FilenameExtension.equalsIgnoreCase(".docx") ||
FilenameExtension.equalsIgnoreCase(".doc")) {
return "application/msword";
}
if (FilenameExtension.equalsIgnoreCase(".xml")) {
return "text/xml";
}
return "image/jpeg";
}
/**
* 获取图片路径
*
* @param fileUrl
* @return
*/
public String getImgUrl(String fileUrl) {
if (!StringUtils.isEmpty(fileUrl)) {
String[] split = fileUrl.split("/");
String url = this.getUrl(this.filedir + split[split.length - 1]);
// log.info(url);
// String[] spilt1 = url.split("\\?");
// return spilt1[0];
return url;
}
return null;
}
/**
* 获得url链接
*
* @param key
* @return
*/
public static String getUrl(String key) {
// 设置URL过期时间为10年 3600l* 1000*24*365*10
Date expiration = new Date(new Date().getTime() + 3600l * 1000 * 24);
// 生成URL
OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);
URL url = ossClient.generatePresignedUrl(bucketName, key, expiration);
ossClient.shutdown();
if (url != null) {
return url.toString();
}
return null;
}
/**
* 多图片上传
*
* @param fileList
* @return
*/
public String checkList(List<MultipartFile> fileList) {
String fileUrl = "";
String str = "";
String photoUrl = "";
for (int i = 0; i < fileList.size(); i++) {
fileUrl = uploadImg2Oss(fileList.get(i));
str = getImgUrl(fileUrl);
if (i == 0) {
photoUrl = str;
} else {
photoUrl += "," + str;
}
}
return photoUrl.trim();
}
// base64集合上传 去除 ‘data:image/jpeg;base64,’
public static Result base64toImage(JSONArray list) {
Result rs = new Result();
ArrayList<String> url = new ArrayList();
try {
for (Object o : list) {
JSONObject parse = (JSONObject) JSONObject.parse(o.toString());
BASE64Decoder decoder = new BASE64Decoder();
byte[] byteArr = decoder.decodeBuffer(parse.getString("img"));
// InputStream inputStream = new ByteArrayInputStream(byteArr);
ByteArrayInputStream inputStream = new ByteArrayInputStream(byteArr);
String imageFileName = parse.getString("name");
String extName = imageFileName.substring(imageFileName
.lastIndexOf(".") + 1);
if ("png".equalsIgnoreCase(extName)
|| "gif".equalsIgnoreCase(extName)
|| "jpg".equalsIgnoreCase(extName)
|| "bmp".equalsIgnoreCase(extName)
|| "jpeg".equalsIgnoreCase(extName)) {
} else {
rs.setCode(300);
rs.setMsg("照片格式不正确");
return rs;
}
String fileName = DateUtil.getTimes() + "." + extName;
String oss_cbs = uploadFileBase64(inputStream, fileName);
System.out.println("base64toImage:\r\n" + oss_cbs);
AliyunOssUntil a= new AliyunOssUntil();
String ossUrl = getUrl_CBS(oss_cbs);
url.add(oss_cbs);
}
rs.setCode(200);
rs.setMsg("上传成功");
rs.setData(url);
} catch (IOException e) {
rs.setCode(300);
rs.setMsg("上传失败");
e.getMessage();
}
return rs;
}
//pdf上传
public static JSONArray pdftoimage_CBS(List list) {
JSONArray url = new JSONArray();
for (Object o : list) {
JSONObject obj = JSONObject.parseObject(o.toString());
File file = new File(obj.getString("IMPATH")); //如下
// File file = new File("E:\\CBS\\CMB\\FMMonitor\\SysData\\U2000\\HIS_770A000003733.pdf");
try {
PDDocument doc = PDDocument.load(file);
PDFRenderer renderer = new PDFRenderer(doc);
int pageCount = doc.getNumberOfPages();
for (int i = 0; i < pageCount; i++) {
BufferedImage image = renderer.renderImageWithDPI(i, 296);
ByteArrayOutputStream bs = new ByteArrayOutputStream();
ImageOutputStream imOut = ImageIO.createImageOutputStream(bs);
ImageIO.write(image, "jpg", imOut);
InputStream inputStream = new ByteArrayInputStream(bs.toByteArray());
inputStream.close();
String oss_cbs = uploadFile2OSS_CBS(inputStream, obj.getString("ISTNBR") + ".jpg");
System.out.println("oss_cbs_KEY:\r\n" + oss_cbs);
AliyunOssUntil a = new AliyunOssUntil();
String ossUrl = a.getUrl_CBS(oss_cbs);
url.add(ossUrl);
}
} catch (IOException e) {
e.printStackTrace();
}
}
return url;
}
public static void main(String[] args) {
// ossClient.putObject(bucketName, "zhaoliying.jpg", new File("zly.png"));
// ossClient.shutdown();
// System.out.println("上传图片完成!");
// 获取单图片路径
AliyunOssUntil a = new AliyunOssUntil();
// String imageUrl = a.checkImage(image); //image 为MultipartFile类型
// 多图片路径
// String imageUrlList = a.checkList(imageList); //imageList为List<MultipartFile> 返回 ","分割的图片路径
// String url = a.getUrl("cbs/2021-11-15/HIS_770A000003733.jpg");
// System.out.println(url);
// ArrayList list =new ArrayList();
// pdftoimage_CBS(list);
String url1 = a.getUrl_CBS("image/2022-01-14/20220114104443.png");
System.out.println(url1);
}
}