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

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

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

上传成功：

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

鼠标离开：图片恢复

 

代码：

//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带来的帮助。