SpringMVC实现图片删除功能

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yswKnight/article/details/79789743

SpringMVC实现图片删除功能

---

页面

当点击重新上传的时候，这两张图片不仅从页面清除，还要从上传的根路径中删除

前端代码

html页面

<div class="upload-cardid">
      <h3 class="a-cardid">1、身份证扫描件</h3>
      <div class="cardid-pic fn-clear">
         <div class="cardid-pos">
             <div class="cardid-pos-con">
                <img class="layui-upload-img" src="" id="cardFrontImg" height="234px" width="382px" style="display: none">
                <input type="hidden" id="cardFrontPicture" >
                <div id="Front">
                    <i id="cardFrontPic" name="cardFrontPic"></i>
                    <p>(正面)</p>
                    <p id="cardFrontText"></p>
                </div>
             </div>
         </div>
         <div class="cardid-neg">
             <div class="cardid-neg-con">
                 <img class="layui-upload-img" src="" id="cardBackImg" height="234px" width="382px" style="display: none">
                  <input type="hidden" id="cardBackPicture" >
                  <div id="Back">
                       <i  id="cardBackPic" name="cardBackPic"></i>
                       <p>(反面)</p>
                       <p id="cardBackText"></p>
                  </div>
              </div>
          </div>
        </div>
    <div class="a-dased-b"></div>
    <!--这里省略营业执照的html -->
</div>
<div class="license-btn">
    <span class="license-btn-y" id="saveBtn">确认</span>
    <span class="license-btn-n" id="resetBtn">重新上传</span>
</div>

js代码

        /**
         * 重新上传
         */
        $("#resetBtn").click(function () {
            //获取上传到服务器中到照片虚拟地址
            var cardFrontPic=$("#cardFrontPicture").val();
            var cardBackPic=$("#cardBackPicture").val();
            var businessLicensePic=$("#businessLicensePicture").val();
            //css样式，请忽略
            $('#cardFrontImg').attr('style','display:none');
            $('#Front').attr('style','display:block');
            $('#cardBackImg').attr('style','display:none');
            $('#Back').attr('style','display:block');
            $('#businessLicenseImg').attr('style','display:none');
            $('#Business').attr('style','display:block');
            //异步删除
            $.ajax({
                type: "POST",
                url: "${ctx}/userInfoApply/fileDelete",
                data:{cardFrontPic:cardFrontPic,
                    cardBackPic:cardBackPic,
                    businessLicensePic:businessLicensePic
                },
                dataType: 'json',
                success: function (data) {
                    //若删除成功，将当前页面的值都清除掉
                    if(data.result=="success"){
                        $("#cardFrontPicture").val("");
                        $("#cardBackPicture").val("");
                        $("#businessLicensePicture").val("");
                    }
                    //失败的提示
                },
                error:function (){
                    layer.msg("服务器异常，请稍后重试！",{icon: 2});
                    setInterval(function(){
                        window.location.href="${ctx}/userInfoApply/resetFail";
                    },1000)
                }
            });
        });

后端代码：

    /**
     * 图片删除
     * @author 王永圣
     * @throws Exception
     * @return str
     */
    @RequestMapping(value = "/fileDelete",method = RequestMethod.POST)
    public @ResponseBody Object fileDelete(@RequestParam(value = "cardFrontPic",required = false)String cardFrontPic,
                                           @RequestParam(value = "cardBackPic",required = false) String cardBackPic,
                                           @RequestParam(value = "businessLicensePic",required = false) String businessLicensePic){
        Map<String, Object> map = new HashMap<String, Object>();
        try {
            //将接受到的三个图片地址放在数组中
            String [] imgArray={cardFrontPic,cardBackPic,businessLicensePic};

            //从配置文件中获取文件存放位置：如：/Users/yswKnight/Desktop/image/
            ReadProperties rp = new ReadProperties("/ApplicationResources.properties");
            String filePath= (String) rp.getProperty("uploadimage.path");
            //将数组中的三个图片循环查看，如果有值，就删除图片，若没有，就跳出循环
            for (String imgName:imgArray) {
                //若数组中有空的，就让他直接退出循环，返回前端结果
                if(imgName==null||imgName.equals("")){
                    map.put("result","null");
                    return map;
                }
                //图片文件夹地址=获取到的文件地址+日期地址：如path=/Users/yswKnight/Desktop/image/2018/03/30/
                //如：这里获取到的imgName=pic/2018/03/30/fbefff0f84824c9e9acf95dca3684109.jpeg
                String path=filePath+imgName.substring(4,15);
                //截取文件名称
                String fileName=imgName.substring(15);
                //到上面截取的路径+路径名下去看，是否有这个图片
                File targetFile = new File(path,fileName);
                //如果存在，就删除
                if(targetFile.exists()){
                    boolean isDelete = targetFile.delete();
                    if(isDelete){
                        map.put("result","success");
                    }else{
                        map.put("result","fail");
                    }
                }else{
                    map.put("result","fail");
                }
            }

        } catch (Exception e) {
            e.printStackTrace();
            map.put("result","fail");
        }finally {
            return map;
        }
    }

删除成功

删除成功后 根路径照片 也相应删除