一整套的图片预览上传的流程

1、form 头

enctype="multipart/form-data"

2、html

<td id="tp">
                    <c:if test="${pd.LOGO==''||pd.LOGO==null}">
                         <a class="photo_add">上传</a>
                    </c:if>
                    <c:if test="${pd.LOGO!=''&&pd.LOGO!=null}">
                        <img alt="" src="${pd.LOGO }"  class="photo_img">
                        <a class="photo_add">修改</a>
                    </c:if>
                </td>

<input type="file" id="LOGO" name="LOGO" onchange="fileType(this)" style="display: none;">
<input type="hidden" id="BEFORE_LOGO" name="BEFORE_LOGO" value="${pd.LOGO}">

3、js

$(function(){
    $(".photo_add").on('click',function(){
            $("#LOGO").click();   });
});

//过滤类型
    function fileType(obj){
        var fileType=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();//获得文件后缀名
        if(fileType != '.gif' && fileType != '.png' && fileType != '.jpg' && fileType != '.jpeg'){
            $("#tp").tips({
                side:3,
                msg:'请上传图片格式的文件',
                bg:'#AE81FF',
                time:3
            });
            $("#LOGO").val("");
        }else{
            var file = document.getElementById('LOGO').files[0]; // 选择上传的文件
            var r = new FileReader();
            r.readAsDataURL(file); // Base64
            $(r).load(function() {
                $('#tp').html('<img src="' + this.result + '" alt="" class="photo_img"  /><a class="photo_add">修改</a>');
                //增加点击事件
                $(".photo_add").on('click',function(){
                    $("#LOGO").click();
                });
            });
        }
    }
    

4、增加

@RequestMapping(value="/save")
    public ModelAndView save(MultipartHttpServletRequest request,
            @RequestParam(value="LOGO",required=false)MultipartFile icon) throws Exception{
        logBefore(logger, "新增Tv_Show");
        ModelAndView mv = this.getModelAndView();
        PageData pd = new PageData();
        pd = this.getPageData();
        String iconPath="";
        //上传LOGO图片
        if(icon!=null&& !icon.isEmpty()){
            iconPath=uploadImg(icon);
        }
        pd.put("LOGO", iconPath);
        pd.put("VIDEOCAST_ID", request.getParameter("VIDEOCAST_ID"));
        pd.put("NAME", request.getParameter("NAME"));
        pd.put("BROADCAST_DATE", request.getParameter("BROADCAST_DATE"));
        pd.put("DURATION", request.getParameter("DURATION"));
        pd.put("RATE", request.getParameter("RATE"));
        pd.put("START_TIME", request.getParameter("START_TIME"));
        pd.put("END_TIME", request.getParameter("END_TIME"));
        pd.put("ORDERS", request.getParameter("ORDERS"));
        pd.put("TV_SHOW_ID", this.get32UUID());    //主键
        tv_showService.save(pd);
        mv.addObject("msg","success");
        mv.setViewName("save_result");
        return mv;
    }

5、修改

@RequestMapping(value="/edit")
    public ModelAndView edit(MultipartHttpServletRequest request,
            @RequestParam(value="LOGO",required=false)MultipartFile icon) throws Exception{
        logBefore(logger, "修改Tv_Show");
        ModelAndView mv = this.getModelAndView();
        PageData pd = new PageData();
        pd = this.getPageData();
        String iconPath="";
        //上传LOGO
        if(icon!=null&& !icon.isEmpty()){
            iconPath=uploadImg(icon);
            pd.put("LOGO", iconPath);
            //删除原来图片
            String BEFORE_LOGO=request.getParameter("BEFORE_LOGO");
            DelAllFile.delFolder(PathUtil.getClasspath()+BEFORE_LOGO); //删除图片
        }
        pd.put("TV_SHOW_ID", request.getParameter("TV_SHOW_ID"));
        pd.put("VIDEOCAST_ID", request.getParameter("VIDEOCAST_ID"));
        pd.put("NAME", request.getParameter("NAME"));
        pd.put("BROADCAST_DATE", request.getParameter("BROADCAST_DATE"));
        pd.put("DURATION", request.getParameter("DURATION"));
        pd.put("RATE", request.getParameter("RATE"));
        pd.put("START_TIME", request.getParameter("START_TIME"));
        pd.put("END_TIME", request.getParameter("END_TIME"));
        pd.put("ORDERS", request.getParameter("ORDERS"));
        tv_showService.edit(pd);
        mv.addObject("msg","success");
        mv.setViewName("save_result");
        return mv;
    }

 6.css

<style type="text/css">
    .photo_add{
        cursor: pointer;
     }
    .photo_img{
         40px;
    }
</style>

 7、controller 部分

/**
     * 上传图片
     * @param file
     * @return 图片相对路径+文件名Map
     * @throws Exception 
     */
    private String uploadImg(MultipartFile file) throws Exception{
        String  folder = DateUtil.getDays(), fileName = "";
        String filePath="";
        String webPath="";
        if (null != file && !file.isEmpty()) {
            filePath = PathUtil.getClasspath() + Const.FILEPATHIMG + folder;  //文件上传路径
            webPath=Const.FILEPATHIMG+folder;
            fileName = FileUpload.fileUp(file, filePath, this.get32UUID());                //执行上传
        }else{
            throw new Exception();
        }
        
        return webPath+"/"+fileName;
    }
    

 注释：修改对应的mapper 的时候

<if test="LOGO!='' and LOGO!=null">
        LOGO= #{LOGO},
</if>

js校验图片非空的时候

if($("#LOGO").val()==""&&$("#BEFORE_LOGO").val()==""){
            $("#tp").tips({
                side:3,
                msg:'请输入节目logo',
                bg:'#AE81FF',
                time:2
            });
            $("#tp").focus();
            return false;
        }