不用form表单ajax上传图片（单个图片上传实例）及回显

一、html代码段（这里无css样式）

上传文件

上传

二、js（jquery）代码段

$(function () {

function hideup () {
			$("#hidupload").click();
        },

function upchange () {
            $("#hidimg").prop("src",URL.createObjectURL($("#hidupload")[0].files[0]));
        }
function upload(){
    var formData = new FormData();
                    formData.append("file",$('#hidupload')[0].files[0]);
                    $.ajax({
                        type: "POST",
                        url: "/shopimgupload/upload",
                        contentType: "application/json",
                        data: formData ,
                        processData: false ,
                        contentType: false ,
                        async:false,
                        success: function (r) {
                            if (r.code == 0) {
                                if(!r.id){
                                    return;
                                }
                            } else {
                                alert(r.msg);
                            }
                        }
                    });
}

}

三、后台java代码段

    @ResponseBody
    @PostMapping("/upload")
    public R upload(@RequestPart(name = "file",required = false)MultipartFile file){
        R r = uploadFile(file);
        return R.ok(r);
    }

此时如果没什么问题的话即可以将图片上传到图片服务器上了，接下来说一下回显部分，无代码；

四、回显

在这之前得搞清楚回显的流程：后台(返回图片路劲格式：localhost:8088/img/getimg/xxx.png)

==》

js或jquery对象当中的图片url属性如：

user:{"name":"aa","age":28,"url":"localhost:8088/img/getimg/xxx.png"}

==》

然后直接赋值给html对应标签属性如：

http://localhost:8088/img/getimg/xxx.png"/>

而不是：$("#hidimg").prop("src",URL.createObjectURL($("#hidupload")[0].files[0]));

好了，以上有什么不明确的地方，可以留言讨论，如有更好的意见，谢谢分享！