HTML5+Canvas调用手机拍照功能实现图片上传(下)


Posted in Javascript onApril 21, 2017

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

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

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; 
  }

好了,到这里就全部结束了,这就是HTML5+jQuery+Canvas调用手机拍照功能实现图片上传的全部实现过程,总感觉自己的思路有些混乱,嗯,慢慢进步吧!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js判断浏览器的比较全的代码
Feb 13 Javascript
最佳的addEvent事件绑定是怎样诞生的
Oct 24 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
Dec 12 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
Mar 31 Javascript
jQuery控制cookie过期时间的方法
Apr 07 Javascript
AngularJS入门教程之模块化操作用法示例
Nov 02 Javascript
微信小程序 图片边框解决方法
Jan 16 Javascript
RequireJS 依赖关系的实例(推荐)
Jan 21 Javascript
jquery+css实现下拉列表功能
Sep 03 jQuery
关于Google发布的JavaScript代码规范你要知道哪些
Apr 04 Javascript
Vue起步(无cli)的啊教程详解
Apr 11 Javascript
微信小程序表单验证WxValidate的使用
Nov 27 Javascript
微信JS-SDK选取手机照片上传功能
Apr 21 #Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
Apr 21 #Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 #Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 #jQuery
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
Apr 21 #Javascript
H5图片压缩与上传实例
Apr 21 #Javascript
H5手机端多文件上传预览插件
Apr 21 #Javascript
You might like
PHP连接Access数据库的方法小结
2013/06/20 PHP
解析如何通过PHP函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
php下获取http状态的实现代码
2014/05/09 PHP
简单PHP会话(session)说明介绍
2016/08/21 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
Jquery 常用方法经典总结
2010/01/28 Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
jQuery与getJson结合的用法实例
2015/08/07 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
bootstrap weebox 支持ajax的模态弹出框
2017/02/23 Javascript
微信小程序引用公共js里的方法的实例详解
2017/08/17 Javascript
关于Layui Table隐藏列问题
2019/09/16 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
vue使用better-scroll实现滑动以及左右联动
2020/06/30 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
vue在图片上传的时候压缩图片
2020/11/18 Vue.js
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
[08:07]DOTA2每周TOP10 精彩击杀集锦vol.8
2014/06/25 DOTA
python ip正则式
2009/05/07 Python
python制作mysql数据迁移脚本
2019/01/01 Python
python用WxPython库实现无边框窗体和透明窗体实现方法详解
2020/02/21 Python
亚历山大·王官网:Alexander Wang
2017/06/23 全球购物
主题班会演讲稿
2014/05/22 职场文书
2014年学生管理工作总结
2014/12/20 职场文书
先进党支部申报材料
2014/12/24 职场文书
2015年世界环境日活动总结
2015/02/11 职场文书
2015年社区教育工作总结
2015/05/13 职场文书
2016年清明节期间群众祭祀活动工作总结
2016/04/01 职场文书
导游词之京东大峡谷旅游区
2019/10/29 职场文书
vue实现Toast组件轻提示
2022/04/10 Vue.js