摘要：
近似的实现是在页面中嵌入一个文件类型的输入控件并隐藏它。单击上载将其传输到控件，选择一个文件，然后以base64模式将图片传输到背景。背景解码器解码并保存图片，并将图片名称保存到数据库或将图片直接转换为字节数组到数据库。数据库接收类型为二进制。将图像转换为base64编码，并使用Ajax@RequestMappingpublicModelAndViewupdateMyHeadImg｛ModelAndViewmav=newModelAndView（）；if｛｝inta=imgdatabase将其发送到后台。索引；HttpServletRequestrequest=。getRequest（）；Stringpath=request.getSession（）.getServletContext（）。getRealPath（“”）；imgdatabase=imgdatabase。子串（a+7）；BASE64解码器解码器=新BASE64解码器（）；byte[]imgbyte；尝试｛imgbyte=coder.decodeBuffer；SAXReader=newSAXReader（）；Documentdoc=reader.read；Elementroot=doc.getRootElement（）；intheadImgId=Integer.parseInt；OutputStreamos=newFileOutputStream；root.setText；UtilTool.SaveToXml；os.write；userService.insetUserHead；//化身被写入数据库os.close（）；mav.addObject；｝catch｛//TODOAuto-generatedcatchblocke.printStackTrace（）；｝mav。setViewName；returnmav；｝4.我在headId上写了图片名称。xml配置文件每次由+1保存和处理。写入配置文件可确保数据持久性，不会出现重复的图像。
大概实现就是在页面嵌入一个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>
个人认为，将图片以二进制的方式保存到数据库更为合理方便，大家可以自己试一试，有空我也会贴出第二种方式的代码。