介绍HTML5+Canvas调用手机拍照功能实现图片上传（下篇）

上一篇只讲到前台操作，这篇专门涉及到Java后台处理，前台通过html' target='_blank'>Ajax提交将Base64编码过的图片数据信息传到Java后台，然后Java这边进行接收处理，通过对图片数据信息进行Base64解码，之后使用流将图片数据信息上传至服务器进行保存，并且将图片的路径地址存进数据库。

大家可以点此链接查看前台本地压缩上传的处理：

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 = request.getParameter( fileData //Base64编码过的图片数据信息，对字节数组字符串进行Base64解码  String imgPath = uploadFile(fileData,liceneName);//进行文件上传操作，上传到服务器中存放（这里是上传到服务器项目文件夹中存到）  boolean result = false;//最终上传成功与否的标志  custCheckInfo = new CustomerCheckInfo();  custCheckInfo.setCust_tax_code(cust_tax_code);  custCheckInfo.setPhonenum(phoneNum);  custCheckInfo.setUpdate_time(df.format(new Date()));  boolean save_flag = customerService.saveRegistCertInfo(custCheckInfo);//保存路径  //判断数据库中的路径是否存在，并且文件夹中的文件是否存在(判断是否上传成功的标志)  boolean is_success = isSuccessUpload(licenceName, cust_tax_code, phoneNum);  if(save_flag is_success){  result = true;  //如果证件上传成功，则记录到记录表中  if(result){  StateRecordInfo record = new StateRecordInfo();  record.setCust_tax_code(cust_tax_code);  record.setPhonenum(phoneNum);  record.setState_id(state_id);  saveStateRecord(record);//执行状态保存操作  System.out.println( ===result: +result);  PrintWriter pw = response.getWriter();  pw.print(result);  pw.close();  }

/**  * 文件上传  * @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;  }

需要学习h5的同学请关注php h5视频教程，众多h5在线视频教程可以免费观看！

以上就是介绍HTML5+Canvas调用手机拍照功能实现图片上传（下篇）的详细内容，其它编程语言

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。