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

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

<input id="hidupload" onchange="upchange()" style="display:none;"/>
<button onclick="hideup()">上传文件</button>
<img id="hidimg" src=""/>
<button onclick="upload()">上传</button>

二、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对应标签属性如：

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

而不是：<img src="G:\img\xxx.png/>，这里不是带盘符的路劲，切记

这里一定得注意必须在后台返回的图片路劲格式里面添加http://，不然显示不了，当然赋值的方式有很多种，通过js、jquery拿到标签再动态赋值，为了直观我这里直接用固定的形式

上面说的是后台==》js==》html的回显

前端直接回显，就是上面jquery代码段里面的这行代码：

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

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