照片的批量上传与回显删除

前端页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!--<meta http-equiv="Content-Type"; content="multipart/form-data; charset=utf-8"/>-->
    <title>多图片上传</title>
    <script type="text/javascript" src="${ctxPath}/static/js/jquery.min.js?v=2.1.4"></script>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #upBox{
            text-align: center;
            width:500px;
            padding: 20px;
            border: 1px solid #666;
            margin: auto;
            margin-top: 150px;
            margin-bottom: 200px;
            position: relative;
            border-radius: 10px;
        }
        #inputBox{
            width: 100%;
            height: 40px;
            border: 1px solid cornflowerblue;
            color: cornflowerblue;
            border-radius: 20px;
            position: relative;
            text-align: center;
            line-height: 40px;
            overflow: hidden;
            font-size: 16px;
        }
        #inputBox input{
            width: 114%;
            height: 40px;
            opacity: 0;
            cursor: pointer;
            position: absolute;
            top: 0;
            left: -14%;

        }
        #imgBox{
            text-align: left;
        }
        .imgContainer{
            display: inline-block;
            width: 32%;
            height: 150px;
            margin-left: 1%;
            border: 1px solid #666666;
            position: relative;
            margin-top: 30px;
            box-sizing: border-box;
        }
        .imgContainer img{
            width: 100%;
            height: 150px;
            cursor: pointer;
        }
        .imgContainer p{
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 30px;
            background: black;
            text-align: center;
            line-height: 30px;
            color: white;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            display: none;
        }
        .imgContainer:hover p{
            display: block;
        }
        #btn{
            outline: none;
            width: 100px;
            height: 30px;
            background: cornflowerblue;
            border: 1px solid cornflowerblue;
            color: white;
            cursor: pointer;
            margin-top: 30px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div style=" 100%;height: 100vh;position: relative;">
    <div id="upBox">

        <div id="inputBox"><input type="file" name="file" title="请选择图片" id="file" multiple accept="image/png,image/jpg,image/gif,image/JPEG" />点击选择图片</div>
        <div id="imgBox">
        </div>
        <button id="btn">上传</button>

    </div>

</div><script src="${ctxPath}/static/modular/ies/uploadImg.js" type="text/javascript" charset="utf-8"></script>//多图上传的js路径
<script type="text/javascript">
    imgUpload({
        inputId:'file', //input框id
        imgBox:'imgBox', //图片容器id
        buttonId:'btn', //提交按钮id
        upUrl:'/examinationRecords/uploadExaminationPhoto',  //提交地址
        data:'file1', //参数名
        num:"10"//最多上传图片个数
    })
</script>

</body>

</html>

uploadImg.js代码

 1 var imgSrc = []; //图片路径
 2 var imgFile = []; //文件流
 3 var imgName = []; //图片名字
 4 //选择图片
 5 function imgUpload(obj) {
 6     var oInput = '#' + obj.inputId;
 7     var imgBox = '#' + obj.imgBox;
 8     var btn = '#' + obj.buttonId;
 9     $(oInput).on("change", function() {
10         var fileImg = $(oInput)[0];
11         var fileList = fileImg.files;
12         for(var i = 0; i < fileList.length; i++) {
13             var imgSrcI = getObjectURL(fileList[i]);
14             imgName.push(fileList[i].name);
15             imgSrc.push(imgSrcI);
16             imgFile.push(fileList[i]);
17         }
18         addNewContent(imgBox);
19     })
20     $(btn).on('click', function() {
21         var len = imgFile.length;
22         var file=[];
23         //alert(len);
24         var formData = new FormData();
25         for (var i = 0; i < len; i++) {
26 
27             formData.append('file',imgFile[i]);
28 
29         }
30         /**
31          * ajax上传，new一个formData对象传递照片数组
32         */
33         $.ajax({
34             url:'/uploadPhoto',
35             type:'post',
36             processData:false,
37             contentType:false,
38             data:formData,
39             //traditional: true,
40             success:function (data) {
41                 
42                 alert("上传成功");
43             },
44             error:function(data){
45                 
46                 alert("上传失败");
47             }
48         })
49     })
50 }
51 //图片展示
52 function addNewContent(obj) {
53     $(imgBox).html("");
54     for(var a = 0; a < imgSrc.length; a++) {
55         var oldBox = $(obj).html();
56         $(obj).html(oldBox + '<div class="imgContainer"><img title=' + imgName[a] + ' alt=' + imgName[a] + ' src=' + imgSrc[a] + ' onclick="imgDisplay(this)"><p onclick="removeImg(this,' + a + ')" class="imgDelete">删除</p></div>');
57     }
58 }
59 //删除
60 function removeImg(obj, index) {
61     imgSrc.splice(index, 1);
62     imgFile.splice(index, 1);
63     imgName.splice(index, 1);
64     var boxId = "#" + $(obj).parent('.imgContainer').parent().attr("id");
65     addNewContent(boxId);
66 }
67 
68 //图片灯箱
69 function imgDisplay(obj) {
70     var src = $(obj).attr("src");
71     var imgHtml = '<div style=" 100%;height: 100vh;overflow: auto;background: rgba(0,0,0,0.5);text-align: center;position: fixed;top: 0;left: 0;z-index: 1000;"><img src=' + src + ' style="margin-top: 100px; 70%;margin-bottom: 100px;"/><p style="font-size: 50px;position: fixed;top: 30px;right: 30px;color: white;cursor: pointer;" onclick="closePicture(this)">×</p></div>'
72     $('body').append(imgHtml);
73 }
74 //关闭
75 function closePicture(obj) {
76     $(obj).parent("div").remove();
77 }
78 
79 //图片预览路径
80 function getObjectURL(file) {
81     var url = null;
82     if(window.createObjectURL != undefined) { // basic
83         url = window.createObjectURL(file);
84     } else if(window.URL != undefined) { // mozilla(firefox)
85         url = window.URL.createObjectURL(file);
86     } else if(window.webkitURL != undefined) { // webkit or chrome
87         url = window.webkitURL.createObjectURL(file);
88     }
89     return url;
90 }
91 
92

后台controller层

 1 /**
 2      * 上传考场记录照片
 3      * @param request
 4      * @return
 5      */
 6     @RequestMapping("/uploadExaminationPhoto")
 7     @ResponseBody
 8     public Object uploadImg(HttpServletRequest request) {
 9 
10         MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest) request;
11         List<MultipartFile> fileList = multipartHttpServletRequest.getFiles("file");
12 　　　　　byte[] uploadExaminationPhoto = saveImg(f);

这里一个bug调到崩溃，开始用HttpRequest接收不到参数，改ajax请求，改页面，我能用的方法都用了，后来调用HttpServletRequest解决，猜测问题出在HttpServletRequest 和HttpRequest传递参数类型（文件和文件数组）的差异，

MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest) request;

saveImg方法

/**
     * 照片解析为数组
     * @param file 照片文件
     * @return byte数组
     * @author xWang
     * @Date 2019-07-03
     */
    protected byte[] saveImg(MultipartFile file){
        byte data[]=null;
        try {
            InputStream ins = file.getInputStream();
            byte[] buffer=new byte[1024];
            int len=0;
            ByteArrayOutputStream bos=new ByteArrayOutputStream();
            while((len=ins.read(buffer))!=-1){
                bos.write(buffer,0,len);
            }
            bos.flush();
            data = bos.toByteArray();

        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return data;
    }

至此，照片解析为字节流，根据业务要求进行保存即可。

另：

最近新发现MultipartFile.transferTo(File dest)可以直接保存为文件，尴尬