用Ajax图片上传预览修改图片

Posted 2020-10-15 落叶归根

首选图片的上传和下载并不是很难，但要注意细节。

一，给出前端图片上传的html代码

1.图片上传的控件

 <img src="/${res}/images/default.png" alt="" class="backimg">
      <form  method="post" id="imgform" enctype="multipart/form-data" action="dy_upload_image.jspx">
          <a href="javascript:;" class="imgstyle">请选择文件
            <input type="file" name="uploadImage" id="uploadImage">
          </a>
          <input type="button" onclick="gosubmit()" id="imgbtn" value="上传" />
      </form>

上传图片要注意给出默认图片，提交按钮是btton、并不是submit ，属性是   enctype="multipart/form-data" 这样后台才能接收到上传的文件。

2.图片上传的js

（1）首次加载的js

$.ajax({
            url:\'dy_firstget_image.jspx\',
            type:\'get\',            
            data:{recid:str},
            success:function(info){
                $(\'.backimg\').attr(\'src\',JSON.parse(info).msg)
                console.log(info)
            },
            error:function(err,errmsg){
                console.log(errmsg)
            }
        })

（2）点击上传时的js

function gosubmit(){
            var formdata=new FormData();
            //formdata.append(\'name\', \'uploadImage\');
            formdata.append(\'uploadImage\',$(\'#uploadImage\').get(0).files[0]);
            formdata.append(\'recid\',str);
            $.ajax({
                url:\'dy_upload_image.jspx\',
                type:\'post\',
                contentType:false,
                data:formdata,
                processData:false,
                success:function(info){    
                    console.log(info)
                    $(\'.backimg\').attr(\'src\',JSON.parse(info).msg);
                },
                error:function(err){
                    console.log(err)
                }
            });
        }    

这里用到了formdata ，我理解的是用ajax 提交的方式将表单提交上去，因为form表单正常submit提交会跳到下一个界面。用ajax提交可以在本页面预览图片，用户体验很好。

把图片数据放到fordata中注意上面红色js的代码，是后面controller接到数据的关键。

先把图片挂上去，昨天的成果（笑脸）

 

3，后台接收图片的controller（首次加载图片，如果没有图片则显示默认图片）

/**
     * 首次加载预览图片
     * @param request
     * @param response
     * @param imageName
     */
    @RequestMapping(value = "/dy_firstget_image.jspx", method = RequestMethod.GET)
    public void dy_firstget_image(HttpServletRequest request, HttpServletResponse response,
            @RequestParam(value = "recid", required = false) String recid) {
        response.setContentType("image/jpeg");
        if(!StringUtils.isEmpty(recid)){
            BaseInfoManageBean baseBean = cmsDyUploadImageDaoImpl.getDXYQSBImageByid(recid);
            //根据id查询该仪器的图片，如果不为空则返回图片url
            if(!StringUtils.isEmpty(baseBean.getPhoto())){
                ResponseUtils.renderText(response, DyUtils.getJSONString(0, baseBean.getPhoto()));
            }
        }
    }

4，上传图片方法

    /**
     * 上传图片、并且把照片url存储到大型仪器表中
     * @param request
     * @param response
     * @param file
     * @param recid
     */
    @RequestMapping(value = "/dy_upload_image.jspx", method = RequestMethod.POST)
    public void dy_upload_image(HttpServletRequest request, HttpServletResponse response,
            @RequestParam(value = "uploadImage", required = false) MultipartFile file,
            @RequestParam(value = "recid", required = false) String recid) {
        if(file!=null){
            String imageUrl = cmsDyUploadImageDaoImpl.saveImage(file, recid);
            if(imageUrl!=null){
                ResponseUtils.renderText(response, DyUtils.getJSONString(0, imageUrl));
                return;
            }
        }
        ResponseUtils.renderText(response, DyUtils.getJSONString(1, "图片上传失败"));
    }

上传成功后返回imageUrl 赋值到img控件上面

<img src="http://127.0.0.1:8080/bjnxy/dy_get_image.jspx?imageName=537e902607944b04a45a3d62d0bd28a3.jpg" alt="" class="backimg">

5，预览图片方法

/**
     * 预览图片
     * @param request
     * @param response
     * @param imageName
     */
    @RequestMapping(value = "/dy_get_image.jspx", method = RequestMethod.GET)
    public void dy_get_image(HttpServletRequest request, HttpServletResponse response,
            @RequestParam(value = "imageName", required = false) String imageName) {
        response.setContentType("image/jpeg");
        try {
            StreamUtils.copy(new FileInputStream(new File(DyUtils.IMAGE_DIR+imageName)), response.getOutputStream());
        }  catch (IOException e) {
            e.printStackTrace();
            ResponseUtils.renderText(response, DyUtils.getJSONString(1, "读取图片失败"));
        }
    }