根据id上传图片与删除功能

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、前台代码

列表点击上传按钮跳出上传页面，点击上传图片
代码如下（示例）：

代码如下（示例）：

if(obj.event=='upload') { //  用的时layui   表格有编辑页面  所以这里判断一下是编辑按钮还是上传按钮
                layer.open({
                    type: 2,
                    title: '图片上传',
                    area: ['600px', '600px'],
                    shade: 0,
                    content: 'uploadPic.html?' + layui.data('version').v + '',
                    btn: ['确定'],
                    btnAlign: 'c',
                    success: function (layero, index) {
                        var iframeWindow = window['layui-layer-iframe' + index];  //弹窗de 子窗口对象
                        for (i in obj.data) {
                            iframeWindow.layui.$('#' + i + '').val(obj.data[i])
                        }
                    },
                    yes: function(index, layero) {
                        //按钮回调
                        var iframeWindow = window['layui-layer-iframe' + index],
                            submit = layero.find('iframe').contents().find("#submit");
                        iframeWindow.layui.form.on('submit(commit)', function(data){
                            flag=false;
                            layer.close(index); //关闭弹层
                            userTable.reload({
                                    url:'../../../../adminCtl/getPlat?date='+new  Date().getTime()+'',
                                })
                        });
                        if(flag==true) {
                            submit.trigger('click');
                        }
                    },
                })
            }

uploadPic.html 页面

代码如下（示例）：

<button class="layui-btn" type="button" id="infoImgBtn"><i class="layui-icon">&#xe67c;</i>上传附件</button>
                <div class="layui-upload">
                    <div class="layui-form-item" >
                        <button class="layui-btn layui-btn-danger layui-btn-xs" type="button"  style="position: absolute;right: 20px" id="delPicture">删除</button>
                    </div>
                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                        图片预览:   <!--这里是上传时的预览 和串上传以后再点击显示已有的图片-->
                        <div class="layui-upload-list" id="test1"></div>
                        <div class="layui-upload-list" id="test2"></div>
                        <div class="layui-upload-list" id="test21"></div>
                    </blockquote>
                </div>


       //上传图片
        var picNameUpload = upload.render({
            elem: '#infoImgBtn', // 根据这个指引按钮
            accept: 'file',
            exts: 'jpg|png|gif|jpeg',
            size: 10 * 1024,
            acceptMime: 'image/*,application/pdf,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,' +
                'application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document',
            url: '../../../../filectl/picture', //上传接口
            data: {
                id: $("#id").val(),
            },
            done: function (res, index, upload) {
                if (res == 0) {
                    layer.msg("图片超过10MB")
                } else if (res == 1) {
                    layer.msg("图片上传错误")
                }
            },
            choose: function (obj) {
                obj.preview(function (index, file, result) {
                    console.log(index); //得到文件索引
                    console.log(file.name); //得到文件对象
                    $('#test1').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')

                })
            }
        });
        //获取设备档案图片地址
        var id = document.getElementById("id").value
        $.ajax({
            url:'../../../../adminCtl/getPicturePath?id='+id+'',
            success(data){
                var picName = id + "-" + data[0].picName
                var basePath = 'http://192.168.62.209/upload/devpicture/'
                $("#test2").append('<a href="javascript:amplificationImg(\''+basePath+picName+'\')">'
                    + '<img alt="" src=" '+basePath+picName+'"  class="layui-upload-img" ></a>')
                $("#test21").append('<img alt="" style="display:none" id="displayImg" src="" />');

            }
        })

<!--删除操作-->
document.getElementById("delPicture").onclick = del
        function del (){
            layer.confirm('确认要删除吗?', function () {
                $.ajax({
                    url: '../../../../filectl/delPicture?id=' + id + '',
                    success: function (res) {
                        layer.msg("请求成功");
                        window.parent.location.reload()//刷新父页面
                    },
                    error: function () {
                        layer.msg("请求失败");
                    },
                })
            })
        }

点击上传按钮

二、后台代码

1.Controller层

代码如下（示例）：

  //根据id上传图片    
 @RequestMapping("/picture")
    @ResponseBody
    public String uploadFiles(HttpServletRequest request,Integer id) throws Exception {
        //前端部分：以文件流形式上传，from表单提交时  enctype = “multipart/form-data”;对应的ajax提交请求时，contentType: false,
        //上传文件的tomcat路径  这里我是直接放在我的服务器上的地址
        String webPath = request.getServletContext().getRealPath("/");            ///usr/local/tomcat8/webapps
        File fileWebPath = new File(webPath);
        String path = fileWebPath.getParent() + File.separator + "upload" + File.separator + "devpicture";  
        // 获取上传的文件
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
        MultipartFile file = multipartRequest.getFile("file");
        //得到原来的文件名在客户机的文件系统名称a
        String Originafn = file.getOriginalFilename();
        File filepath = new File(path, Originafn);    //得到上一级路径
        long size = file.getSize();
        if (size > 10485760)  //文件小于10MB
            return "0";
        //判断路径是否存在，如果不存在就创建一个
        if (!filepath.getParentFile().exists()) {
            filepath.getParentFile().mkdirs();
        }
        String PicName = FileUtils.getNewFilename(Originafn);
        //这里根据数据库递增的id和文件生成PicNameId  防止查询文件时重名问题
        String PicNameId = id + "-" + PicName;
        //将上传文件保存到一个目标文件当中
        try {
            //服务器存的是防止重名的文件名
            String oldnameFile = path + File.separator + PicNameId;
            file.transferTo(new File(oldnameFile));
            //数据库存的是文件原名  这里直接连的mapper层
            dev_infoMapper.updatePicture(Originafn,id);
        } catch (Exception e) {
            e.printStackTrace();
            return "1";
        }
        return "2";
       //0：文档超过10MB；1：上传出错； 2：上传成功；
    }

   /**
     * 根据picNameId删除设备档案图片
     * @param id
     * @return
     */
    @RequestMapping("/delPicture")
    @ResponseBody
    public void delPicture(HttpServletRequest request, Integer id) {
        // 首先根据id查询图片PicNameId
        dev_info devInfo = dev_infoMapper.getPicNameId(id);
        String fn = devInfo.getPicNameId();
        //根据id先删除数据库信息
        adminService.delPicture(id);
        //然后在拼接图片的在服务器上的路径 
        String webPath = request.getServletContext().getRealPath("/");     
        File fileWebPath = new File(webPath);
        String path = fileWebPath.getParent() + File.separator + "upload" + File.separator + "devpicture";    //+"/upload/knowledgebase/";
        File filepath = new File(path, fn);    //得到上一级路径
        // 最后进行删除操作
        filepath.delete();
    }

2.Mapper层和xml

代码如下（示例）：

   /**
     * 根据id上传图片
     * @param picName
     * @param id
     */
    void updatePicture(@Param("picName") String picName, @Param("id") Integer id);

   /**
     * 根据id查询设备档案图片id
     * @param id
     * @return
     */
    dev_info getPicNameId(@Param("id") Integer id);

   /**
     * 根据id删除设备档案图片
     * @param id
     * @return
     */
    void delPicture(@Param("id")Integer id);


<update id="updatePicture" parameterType="Entities.dev_info">
    update dev_info
    <set>
      picName = #{picName,jdbcType=VARCHAR},
      picNameId = concat(#{id}, "-" ,#{picName}),
    </set>
    where id = #{id,jdbcType=INTEGER}
  </update>


 <select id="getPicNameId" parameterType="java.lang.Integer" resultMap="BaseResultMap">
    select picNameId
    from dev_info
    where id = #{id}
  </select>
  

<!--因为不是删除一条数据  而是把一条数据中的字段清空 所以用update set  null-->
<update id="delPicture" parameterType="Entities.dev_info">
    update dev_info
    set picNameId = null,picName = null
    where id = #{id,jdbcType=INTEGER}
  </update>

---