springboot上传图片到本地，form提交，原生ajax异步提交并展示到页面上

?前端form

    <img id="preview" src="" width="150" height="180" style="display: block; width: 150px; height: 180px;">
    <form enctype="multipart/form-data" method="post" action="addParent">
        <input type="file" name="file" id="docfile" style="width:150px;" onchange="setImagePreview();">
        <input type="submit" value="确认更改" style="margin-left: 80px;margin-top: 20px;"/>
    </form>

js 中setImagePreview()方法的作用是，展示上传的图片

function setImagePreview() {
    var docObj = document.getElementById("docfile");
    var imgObjPreview = document.getElementById("preview");
    console.log(docObj.files[0])
    if (docObj.files && docObj.files[0]) {
        var reader = new FileReader();
        reader.readAsDataURL(docObj.files[0]);//发起异步请求
        reader.onload = function () {
            //读取完成后，数据保存在对象的result属性中
            // console.log(this.result)
            imgObjPreview.src = this.result
        }
    }

?上面的方法为form提交，如果想用原生ajax提交，将确认更改按钮的submit改为button，并将下面js的changeAvatar方法加入其中，如下图

    <form enctype="multipart/form-data" method="post" action="addParent">
        <input type="file" name="file" id="docfile" style="width:150px;" onchange="setImagePreview();">
        <input type="button" value="确认更改" style="margin-left: 80px;margin-top: 20px;" onclick="changeAvatar()"/>
    </form>

js的代码

//更改头像
function changeAvatar() {
    var vartar = $("docfile").files[0];
var formData=new FormData();
formData.append("file",vartar)
        //1、创建ajax对象
        var xhr = new XMLHttpRequest();
    // 2、绑定监听--监听服务器是否已经返回对应数据（回调函数)
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                //5、判断通讯状态或接收返回数据，这个是写在第三个步骤回调函数里边的
                var res = xhr.responseText;
                alert(res)
            }
        }
        //3、绑定地址,及配置其他参数
        xhr.open("POST", "addParent?" , true);
        //4、发送请求
        xhr.send(formData);
}

后端

server层具体代码

???????@Value("${file-uploadFolder}")
private String fileUploadFolder;    

public String uploadToLocal(MultipartFile file, String fileUploadFolder) {
        // 获取文件原本的名字
        String originName = file.getOriginalFilename();
        // 判断文件是否是合法文件
        Set<String> set = new HashSet<>();
        set.add(".jpg");
        set.add(".png");
        String endName=originName.substring(originName.lastIndexOf("."));//获取文件后缀
        originName= UUID.randomUUID()+endName;//重新生成文件名
        if(!set.contains(endName)){
            return new String("上传的文件类型错误,只能上传jpg,png类型的文件");
        }
        //获取绝对路径
        ApplicationHome applicationHome=new ApplicationHome(this.getClass());
        String savePath = applicationHome.getDir().getParentFile().getParentFile().getAbsolutePath() +
                fileUploadFolder;
        // 保存文件的文件夹
        File folder = new File(savePath);
        // 判断路径是否存在,不存在则自动创建
        if (!folder.exists()) {
            folder.mkdirs();
        }
//图片的总路径
String path=savePath+originName;
        try {
            file.transferTo(new File(path));
            System.out.println("图片保存在了"+ path);
        } catch (IOException e){
            System.out.println("执行失败");
        }
        return "success";
    }

fileUploadFolder值写在yml中，值改为自己想保存的地址