用ssm框架上传头像，从前端到后端的详细代码

我的方法是先上传图片到服务器上，返回一个图片的路径，之后再修改数据库头像字段的路径，从而达到头像修改的方法。

首先在pom.xml里导入依赖包

		
            commons-fileupload
            commons-fileupload
            1.3.1
        
        
            commons-io
            commons-io
            2.4
        

配置一下resources目录下的spring-mvc.xml

后台的代码

   @RequestMapping(value ="uploadHead",method = RequestMethod.POST)
    public Object upload(MultipartFile dropzFile, HttpServletRequest request){
       Map result = new HashMap();
       //获取该文件的名字
        String fileName = dropzFile.getOriginalFilename();
        //获取服务器的绝对路径
        String filePath = request.getSession().getServletContext().getRealPath("/upload");
		//切割文件的后缀，获取文件的类型
        String fileSuffix = fileName.substring(fileName.lastIndexOf("."), fileName.length());
        //创建文件对象，把服务器的路径放进去
        File file = new File(filePath);
        //判断路径是否存在，不在创建
        if (!file.exists()) {
            file.mkdirs();
        }
        //拼接文件名  使用uuid防重名和文件的后缀，
        file = new File(filePath, UUID.randomUUID() + fileSuffix);
        if(!file.exists()){
            try {
            	//创建文件
                file.createNewFile();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        try {
        	//开始搬运文件
            dropzFile.transferTo(file);
        } catch (IOException e) {
            e.printStackTrace();
        }
        result.put("fileName", file.getName());
        //最后返回值，该值为上传后文件的名字
        return result;
    }


@RequestMapping(value ="upPersonageById",method = RequestMethod.POST)
    public Object upPersonageById(@RequestBody UserInfo userInfo){
    	//前端传id和修改后图片的名字之后修改用户信息头像的路径（图片的名字）
	}

前端的代码

要好看的样式需要自己改


替换头像
确定更换



// js部分  这里我采用的是jQuery及ajax发送请求
//点击上传按钮，触发真正的按钮
function files(){
        $("#file").click();
	}

// 这里很重要，当选择上传图片后，图片的路径发生改变，需要修改路径，按照这个格式改就没错了
    $("#file").change(function(){
        $("#headPath").attr("src",URL.createObjectURL($(this)[0].files[0]));
        $("#file2").css("display","inline");
    });


//开始通过ajax上传图片
function upimg(){
		//该函数为储存表单数据的，而这里就头像一个文件，所以只需向该函数里添加一个数据
       var dropzFile = new FormData(); 

		//该函数采用Map的键值形式，键的名字需要和后台的接受的该值的名字一样，该值就为文件
       dropzFile.append("dropzFile",$('#file')[0].files[0]);
		$.ajax({
			url:"uploadHead", 
            type: 'POST',
            data: dropzFile,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
			success: function (resp) {
				console.log(resp);
                $("#headPath").attr("src","upload/"+resp.fileName);
                //上传成功后发送另一个请求，修改数据库的的图片路径
                upSetImg(resp.fileName); 
                $("#file2").css("display","none");
			},
			error:function () {
				alert("失败");
			}
		})
    };
    
  //修改数据后台的图片路径
function upSetImg(fileName) {
        $.ajax({
            url: "upPersonageById",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
			data:JSON.stringify({
				"headPath":fileName,
				"userInfoId":userId
			}),
            success: function (resp) {
				alert("图片修改成功");
            },
			error:function (resp) {
				alert("修改失败")
            }
        })
    }