ajax图片上传

注意:
1.pom文件中配置虚拟路径

2.此处路径用于windows下操作:

此处路径用于部署到linux下操作:

控制层代码:

	@RequestMapping("addPic")
    @ResponseBody
    public String addPic(MultipartFile file) throws IOException {
        //获取文件后缀名
        String preName = file.getOriginalFilename().
                substring(file.getOriginalFilename().
                        lastIndexOf("."));
        //生成一个随机名称
        String name = UUID.randomUUID().toString();
        //组合成图片名
        String newFileName = name+preName;
        //图片写入磁盘
        file.transferTo(new File("d:/pic",newFileName));
        return "/pic/"+newFileName;
    }

添加页面代码：

图片:
    <input name="file" type="file" onchange="addPic()">
    <img src="" height="50px" hidden50px id="imgId">
    <input type="hidden" name="photo"><br><br>

	//图片上传
    function addPic() {
        let formData = new FormData;
        let file = $('[name="file"]')[0].files[0];
        formData.append("file",file);
        $.ajax({
            url:"addPic",
            data:formData,
            type:"post",
            contentType:false,
            processData:false,
            success:function (msg) {
                alert(msg);
                $('[name="photo"]').val(msg)
                $("#imgId").prop("src",msg)
            }
        })
    }