点击头像上传图片ajax

话不多说，直接上代码

<div id="head"> <img style="width: 80px;height: 80px" src="images/ckin.jpg" id="choice"> <input style="display: none" type="file" name="file" accept="image/*" value="0" id="changehead" onchange="read(this)"> </div>

 

//注意：由于在我的项目中，$符号与jQuery冲突了，所以这里我把$符号换成了jq var jq = $.noConflict(); jq(function() { // 点击修改头像 jq("#choice").click(function() { // 点击input jq("#changehead").click(); }) }) // 预览图片 function read(a) { console.log(a.files); var file = a.files[0]; //创建读取文件的对象 var reader = new FileReader(); //创建文件读取相关的变量 var imgFile; //为文件读取成功设置事件 reader.onload = function(e) { // alert('文件读取完成'); imgFile = e.target.result; console.log(imgFile); jq("#choice").attr('src', imgFile); }; //正式读取文件 reader.readAsDataURL(file); // FormData 是 Html5 新加进来的一个类,可以模拟表单数据 // 可以使用 JQuery 的 $.Ajax 结合 FormData 异步上传二进制文件 var formdata=new FormData(); formdata.append("headimg",$("#changehead").get(0).files[0]); formdata.append("nickname",name); $.ajax({ url:"/upinfo",//后台路径 type:"POST", data:formdata, // 下面三个属性一定要加 processData:false,//对data参数进行序列化处理 contentType:false,//内容编码类型 cache:false,//不使用缓存 dataType:"json", success:function(result){ if (result==1){ } } }) }

 

// 修改信息 @RequestMapping("/upinfo") @ResponseBody public int upinfo(HttpServletRequest request, @RequestParam(value = "headimg", required = false) MultipartFile file,HttpSession session){ //路径 String path=""; try { File path22 = new File(ResourceUtils.getURL("classpath:").getPath()); File upload = new File(path22.getAbsolutePath(),"static/header"); //header是上传文件夹 path=upload.getAbsolutePath(); }catch (FileNotFoundException e){ } //获取文件名称 String filename=file.getOriginalFilename(); String geshi=filename.substring(filename.length()-4, filename.length()); System.out.println(filename); //修改文件名称(当前时间，精确到毫秒),防止文件名重复 SimpleDateFormat formatter = new SimpleDateFormat("yyyyMMddHHmmssSSS"); String formatStr =formatter.format(new Date()); filename=formatStr+"."+geshi; File f=new File(path,filename); if (!f.exists()) { try { f.createNewFile(); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } } try { file.transferTo(f); } catch (IllegalStateException e) { // TODO Auto-generated catch block e.printStackTrace(); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } //把信息存储到数据库，请换成自己的方法 int i=ls.upnick(nickname,"/header/"+filename,login.getUid()); if (i==1){ return 1; } return 0; }