首页 > 代码库 > HTML5+Canvas+jQuery调用手机拍照功能实现图片上传(二)
HTML5+Canvas+jQuery调用手机拍照功能实现图片上传(二)
上一篇仅仅讲到前台操作,这篇专门涉及到Java后台处理。前台通过Ajax提交将Base64编码过的图片数据信息传到Java后台,然后Java这边进行接收处理。通过对图片数据信息进行Base64解码,之后使用流将图片数据信息上传至server进行保存,而且将图片的路径地址存进数据库。
大家能够点此链接查看前台本地压缩上传的处理:
HTML5+Canvas+jQuery调用手机拍照功能实现图片上传(一)
ok,废话不多说了。直接贴代码吧。
1、前台js代码:
$.ajax({ async:false,//是否异步 cache:false,//是否使用缓存 type: "POST", data:{fileData:fileData,licenceName:licenceName,cust_tax_code:cust_tax_code,phoneNum:phoneNum,state_id:state_id}, dataType: "json", timeout: 1000, contentType : 'application/x-www-form-urlencoded; charset=utf-8', url: $('#ctx').val()+"CustomerCheckServlet?action=uploadLicence", success: function(result){ console.log(result); if(result == true){ alert('Success Upload~~~'); }else if(result == false){ alert('Error Upload~~~'); } }, error: function(){ alert("Error Linking~"); } });
2、后台Java代码
/** * 证件上传 * @param request * @param response * @throws IOException */ public void uploadLicence(HttpServletRequest request,HttpServletResponse response) throws IOException{ log.info("=====================uploadLicence"); df = new SimpleDateFormat("yyyy-MM-dd"); String cust_tax_code = request.getParameter("cust_tax_code"); String phoneNum = request.getParameter("phoneNum"); String licenceName = request.getParameter("licenceName"); String fileData = http://www.mamicode.com/request.getParameter("fileData");//Base64编码过的图片数据信息,对字节数组字符串进行Base64解码>/** * 文件上传 * @param fileData * @param fileName * @return */ public String uploadFile(String fileData,String fileName){ //在自己的项目中构造出一个用于存放用户照片的目录 String imgPath = this.getServletContext().getRealPath("/uploads/"); //假设此目录不存在则创建一个 File f = new File(imgPath); if(!f.exists()){ f.mkdir(); } //拼接文件名,不存在就创建 imgPath = imgPath + "/" + fileName + ".jpg"; f = new File(imgPath); if(!f.exists()){ f.mkdir(); } log.info("====文件保存的位置:"+imgPath); //使用BASE64对图片文件数据进行解码操作 BASE64Decoder decoder = new BASE64Decoder(); try { //通过Base64解密,将图片数据解密成字节数组 byte[] bytes = decoder.decodeBuffer(fileData); //构造字节数组输入流 ByteArrayInputStream bais = new ByteArrayInputStream(bytes); //读取输入流的数据 BufferedImage bi = ImageIO.read(bais); //将数据信息写进图片文件里 ImageIO.write(bi, "jpg", f);// 无论输出什么格式图片。此处不需修改 bais.close(); } catch (IOException e) { log.error("e:{}",e); } return imgPath; }/** * 推断是否成功上传 * @return */ public boolean isSuccessUpload(String licenceName,String cust_tax_code,String phonenum){ boolean flag = false; String licencePath = "";//证件图片上传成功之后保存的路径 custCheckInfo = customerService.getCustomerCheckInfo(cust_tax_code, phonenum); licencePath = custCheckInfo.getTax_regist_cert(); //推断证件路径不为空而且在上传存放的目录中存在。就表明以上传成功 File f = new File(licencePath); if(licencePath.length() >0 && f.exists()){ flag = true; } return flag; }
好了,到这里就所有结束了。这就是HTML5+jQuery+Canvas调用手机拍照功能实现图片上传的所有实现过程,总感觉自己的思路有些混乱。嗯,慢慢进步吧!
HTML5+Canvas+jQuery调用手机拍照功能实现图片上传(二)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。