SpringBoot图片上传(五) 上一篇的新版本,样式修改后的

简单描述:一次上传N张图片(N可自定义);上传完后图片回显,鼠标放到已经上传的图片上后,显示删除,点击后可以删除图片,鼠标离开后,图片恢复。

效果:一次上传多个图片后的效果

上传成功:

SpringBoot图片上传(五) 上一篇的新版本,样式修改后的

鼠标悬浮到图片上:图片变成垃圾桶图片,点击可以删除该图片,鼠标离开,图片恢复

SpringBoot图片上传(五) 上一篇的新版本,样式修改后的

鼠标离开:图片恢复

SpringBoot图片上传(五) 上一篇的新版本,样式修改后的

代码:

//html代码
<div class="col-md-12">
<label class="control-label flex" style="margin-top: 10px;">
上传附件<span class="star align-items">*</span>
</label>
<form id="imgForm">
<div class="" id="imgDiv">
<img th:src="@{/assets-new/apps/img/shangchuan.png}" id="imgIcon"
width="35px" height="35px"/>
<input type="file" id="seledIcon" style="display:none"
multiple="multiple" accept="image/gif,image/jpg,image/png,image/JPEG"/>
</div></form>
<input type="hidden" name="contractIcon" id="contractIcon"/>
</div> 
//js代码
$("#imgIcon").on("click", function () {
$("#seledIcon").trigger("click");
}); 
//我放在add.html中了
<script type="text/javascript" th:inline="javascript" xmlns:th="http://www.w3.org/1999/xhtml">
<![CDATA[
imgUpload({
inputId:'seledIcon', //input框id
upUrl: rootPath +'/oper/contract/uploadImg', //提交地址
data:'file', //参数名
num:"9"//最多上传图片个数 可自定义
});
]]>
</script>
//js代码
var imgSrc = []; //存放图片路径
var imgFile = []; //存放文件流
var imgName = []; //存放图片名字
//选择图片的操作
function imgUpload(obj) {
var oInput = '#' + obj.inputId;
//用on是因为它可以动态的绑定事件
$(oInput).on("change", function() {
imgFile = [];
//获取type=file的input
var fileImg = $(oInput)[0];
//得到所有的图片列表
var fileList = fileImg.files;
for(var i = 0; i < fileList.length; i++) {
       //springboot内置的tomcat文件传输默认是1M 过滤超过1M的文件 
if(fileList[i].size<1024*1024){
//得到每个图片的路径
var imgSrcI = getObjectURL(fileList[i]);
//向文件名的数组末尾添加此文件名
imgName.push(fileList[i].name);
//向路径的数组末尾添加路径
imgSrc.push(imgSrcI);
//在文件流数组的末尾添加文件
imgFile.push(fileList[i]);
}
} var fd = new FormData($('#imgForm')[0]);
//由于fd对象中已经包含<input type='file'>的input标签,如果不删除,就会造成重复上传
fd.delete("file");
//将文件流循环添加到FormData对象中
for(var i=0;i<imgFile.length;i++){
fd.append(obj.data,imgFile[i]);
}
//已上传的图片个数
var numed = document.getElementsByClassName("imgTofile").length;
     //新添加的文件列表的长度,有几张图
var numing = fileList.length;
//图片总数
     var num = numed + numing;
if (imgName.length<1){
layer.msg("请选择上传的图片!");
return false;
} else if(num >obj.num){
layer.msg("最多只能上传"+obj.num+"张图片!");
return false;
}else{
//上传所有的图片
submitPicture(obj.upUrl, fd);
}
}); } //上传(将文件流数组传到后台)
function submitPicture(url,data) {
  //点击上传后,就清空,解决上传完图片后,再点击上传,不选图片,直接关闭,也能上传的bug
  imgStr.splice(0,imgStr.length);
  imgFile.splice(0,imgFile.length);
  imgName.splice(0,imgName.length);
for (var p of data) {
console.log(p); }
if(url&&data){
$.ajax({
url: url,
type: "post",
data: data,
async: true,
//下面这两个要写成false,要不然上传不了。
processData: false,
contentType: false,
success: function(data) {
var contractIcon = data.substring(1,data.length-1);
var myArray=new Array();
myArray = contractIcon.split(",");
layer.msg("成功上传"+myArray.length+"张图片");
var idSet = [];//存放上传成功图片的id
for(var i=0; i<myArray.length;i++){
var str = "img"+ makeId();
var html = ' <img th:src="" class="imgTofile" id="'+ str +'" value="'+myArray[i]+'" onclick="deleteImg('+ str +')" width="35px" height="35px"/>'
idSet.push(str);
$("#imgDiv").append(html);
}
          //回显图片
for(var j=0;j<myArray.length;j++){
var obj = "#"+idSet[j];
            var imgIcon = rootPath + 'oper/contract/downLoadImage?contractIcon=' + myArray[j];
$(obj).attr('src', imgIcon);
}
          //鼠标悬浮图片,显示'删除'图片,鼠标离开,图片恢复
$(".imgTofile").each(function() {
var imgName = '';
$(this).mouseover(function () {
imgName = $(this).attr('value');
$(this).attr('src',rootPath +'/assets-new/apps/img/shanchu.png');
});
$(this).mouseleave(function () {
$(this).attr('src',rootPath + 'oper/contract/downLoadImage?contractIcon=' + imgName);
});
});
},
error:function(xhr,emsg,e) {
//打印ajax发生的错误
console.log(e);
//答应出ajax请求返回的文本信息
console.log(xhr.responseText());
}
});
}else{
layer.msg('数据格式不正确!');
}
}
//图片预览路径
function getObjectURL(file) {
var url = null;
if(window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if(window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if(window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
//删除图片
function deleteImg(str) {
var parent = document.getElementById("imgDiv");
parent.removeChild(str);
}
//获取5为随机字符串做图片id
function makeId()
{
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for( var i=0; i < 5; i++ )
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
//后台java代码

//配置文件constant.properties
#上传图标的存放路径
constant.image_path=D:\\image\\icon
#上传图标的临时存放路径
constant.image_temp_path=D:\\image\\temp //Controller
@Value("${constant.image_path}")
private String imagePath; @Value("${constant.image_temp_path}")
private String imageTempPath; @RequestMapping("/uploadImg")
@ResponseBody
public String uploadImg(MultipartFile file[]) throws Exception {
List<String> list = new ArrayList<>();
for (MultipartFile f : file) {
// 图片的名字用毫秒数+图片原来的名字拼接
String imgName = System.currentTimeMillis() + f.getOriginalFilename();
//上传文件
uploadFileUtil(f.getBytes(), imageTempPath, imgName);
list.add(imgName);
}
String str = StringUtils.join(list,",");
return str;
} private void uploadFileUtil(byte[] file, String imgPath, String imgName) throws Exception {
File targetFile = new File(imgPath);
if (!targetFile.exists()) {
targetFile.mkdirs();
}
FileOutputStream out = new FileOutputStream(imgPath + File.separator + imgName);
out.write(file);
out.flush();
out.close();
} //下载文件
@RequestMapping("/downLoadImage")
public void downLoadImage(String contractIcon, HttpServletResponse response) {
if (!Tools.notEmpty(contractIcon)) {
return;
}
File file = null;
file = new File(imagePath + File.separator + contractIcon);
if (!file.exists()) {
file = new File(imageTempPath+ File.separator + contractIcon);
} if (file.exists()) {
BufferedInputStream in = null;
BufferedOutputStream out = null;
try {
in = new BufferedInputStream(new FileInputStream(file));
out = new BufferedOutputStream(response.getOutputStream());
} catch (IOException e) {
e.printStackTrace();
}
try {
// 设置response内容的类型
response.setContentType(new MimetypesFileTypeMap().getContentType(file));
// 设置头部信息
response.setHeader("Content-disposition", "attachment;filename=" + contractIcon);
byte[] buffer = new byte[1024];
int length = 0;
while ((length = in.read(buffer)) > 0) {
out.write(buffer, 0, length);
}
out.flush();
} catch (IOException e) {
e.printStackTrace();
}finally {
try {
in.close();
out.close();
} catch (IOException e) {
e.printStackTrace();
}
}
} } 

总结:改完之后成就感还是有那么一点的o(*^@^*)o,分享给大家!!!共同进步。谢谢原博客https://blog.csdn.net/jtshongke/article/details/78516559带来的帮助。

上一篇:mysql常用指令


下一篇:uniapp点击底部tabbar不跳转页面