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>

個人認爲，將圖片以二進制的方式保存到數據庫更爲合理方便，大家可以自己試一試，有空我也會貼出第二種方式的代碼。