JAVA实现网页上传头像

大概实现就是在页面嵌入一个file类型的input控件，并且将之隐藏，点击上传传递到这个控件上面，选择文件，将图片以base64的方式传递到后台，后台解码器解码，保存图片，并且把图片名字保存到数据库或者直接把图片转为byte数组存到数据库，数据库接收类型为binary。

这里我就介绍第一种办法将图片保存到本地的方式。

1.前台input控件的代码，这里设置accept表示只接受图片类型的文件。

 <input type="file" name="fileToUpload" id="fileToUpload" onchange="openFile(event)" style="display:none;" accept="image/*">
  </form>

2.onchange方法则为选择文件时候触发的方法。正常流程应该是不触发onchange方法，而是选择了图片的时候，应该有个上传按钮，在执行相关事件，我这里的做法其实就是选择了图片就会进行上传，这里可以根据个人的需求进行修改。js中onchange所执行的方法。将图片转换为base64编码，利用Ajax传到后台。

var openFile = function (event) {
    var input = event.target;
    var reader = new FileReader();
    reader.onload = function () {
        var database64 = getBase64Image(reader.result);
        $.ajax({
            url: "user/updateheadimg.do",
            type: "POST",
            data: { "imgdatabase": database64,"userid":$("#loginuserid").html()},
            success: function (data) {
                $("#headpng").html(data);
            }
        });  

    };
    reader.readAsDataURL(input.files[0]);  

};
function getBase64Image(imgElem) {
    return imgElem.replace("/^data:image\/(jpeg|jpg);base64,/", "");
}  

3.后台接收到图片的base64编码，进行解码，保存图片到项目本地，保存图片路径到数据库。

@RequestMapping("updateheadimg")
    public ModelAndView updateMyHeadImg(String imgdatabase,String userid){
        ModelAndView mav=new ModelAndView();
        if(imgdatabase==null){

        }
        int a=imgdatabase.indexOf("base64");
        HttpServletRequest request = ((ServletRequestAttributes)RequestContextHolder.getRequestAttributes()).getRequest();
        String path=request.getSession().getServletContext().getRealPath("");
        imgdatabase=imgdatabase.substring(a+7);
        BASE64Decoder decoder=new BASE64Decoder();
        byte[] imgbyte;
        try {
            imgbyte = decoder.decodeBuffer(imgdatabase);
            SAXReader reader=new SAXReader();
            Document doc=reader.read(path+"\\WEB-INF\\classes\\headId.xml");
            Element root=doc.getRootElement();
            int headImgId=Integer.parseInt(root.getTextTrim());
            OutputStream os=new FileOutputStream(new File(path+"\\headImg\\"+headImgId+".png"));
            root.setText(""+(headImgId+1));
            UtilTool.SaveToXml(doc,new File(path+"\\WEB-INF\\classes\\headId.xml"));
            os.write(imgbyte,0, imgbyte.length);
            userService.insetUserHead(headImgId+".png", userid);//头像写入数据库
            os.close();
            mav.addObject("imgsrc", headImgId+".png");
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        mav.setViewName("headimg");
        return mav;
    }

4.图片名字我写在了headId.xml配置文件中并且每次保存了都+1处理，写在配置文件是保证了数据持久化，不会出现重名图片。

<?xml version="1.0" encoding="UTF-8"?>
<headid>
1
</headid>

个人认为，将图片以二进制的方式保存到数据库更为合理方便，大家可以自己试一试，有空我也会贴出第二种方式的代码。