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

朱雀 2023-08-17 16:33 133阅读 0赞

前端页面

<!DOCTYPE html>
    <html>
    <head>
        <meta 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="width: 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] + ' οnclick="imgDisplay(this)"><p οnclick="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="width: 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;width: 70%;margin-bottom: 100px;"/><p style="font-size: 50px;position: fixed;top: 30px;right: 30px;color: white;cursor: pointer;" οnclick="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)可以直接保存为文件，尴尬

转载于:https://www.cnblogs.com/xiaowangxiao/p/11169250.html