ajax结合FormData上传图片，并在前台显示图片

最新推荐文章于 2025-04-13 10:52:50 发布

蓝斌星

最新推荐文章于 2025-04-13 10:52:50 发布

阅读量4.1k

点赞数 6

本文链接：https://blog.youkuaiyun.com/qq_28751497/article/details/82114049

版权

博主针对初学者，尤其是培训完的人员，整理从前端到后台的ajax上传图片示例。指出培训学校学的上传图片后立刻跳转页面的方式，在实际需求中较少，故整理此示例并附上代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网上这种例子有很多，但是我今天就想整理一下自己的，从前端到后台。

首先，这个例子是针对刚刚毕业或者刚刚培训完的初学者，特别是培训的，因为我本人也是培训出来的，你们在培训学校学的上传图片

<form action="">

</form>

通过这个方式的，基本上可以无视了，因为我做到现在没有哪个需求是上传完图片就立刻跳转页面的，所以我整理的是ajax上传图片。
话不多说，先上代码

页面

<Form id="form">
<input type="file"  onchange="upload();"/>
</Form>

<img  src=""/>//这里是后台返回的地址显示图片的地方

前端

function upload() {
    //这里唯一需要注意的就是这个form-add的id
    var formData = new FormData($("#form")[0]);
    $.ajax({
        //接口地址
        url: '/upload' ,
        type: 'POST',
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success: function (data) {
            //成功的回调
            if(data.code == 300){
                $("img").attr("src",data.path) //得到后台传来的项目路径并显示图片
            }
        },
        error: function (returndata) {
           //请求异常的回调
           // modals.warn("网络访问失败，请稍后重试!");
        }
    });
}

后台

//这里后台用的是MultipartFile去接收File对象
@RequestMapping("/upload")
public Map upload(MultipartFile file){
//这里要注意的是两个路径，这是重点，在后台关键的就是操作两个路径，
//一个是物理路径，是你实际上传的地方，
//然后返回的是项目路径，我称之为虚拟路径，（和物理路径对应）。
//这里省略号是具体某个文件，物理路径和虚拟路径必须保持一致
String realPath=request.getSesson.getServletContext().getRealPath(/.....路径)  
String viturlPath=request.getScheme()+”://”+request.getServerName()+”:”+requestServerPort()+
request.getContextPath()+”/”.........路径

file.transferTo(new File(realPath));//传到物理路径
//这里我用了一个jdk1.7的语法封装map，我比较喜欢这种语法，可读性比较好
Map<String,Object> map=new HashMap()<String,Object>{
    {
    put("path",viturlPath);
    }
};
}