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

 更新时间:2017年4月27日 10:00  点击:1453

上一篇只讲到前台操作,这篇专门涉及到Java后台处理,前台通过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; 
  } 

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

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

[!--infotagslink--]

相关文章

  • js实现上传图片及时预览

    这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
  • jQuery mobile 移动web(6)

    这篇文章主要介绍了jQuery mobile 移动web(6)的相关资料,需要的朋友可以参考下...2015-12-21
  • smartupload实现文件上传时获取表单数据(推荐)

    这篇文章主要介绍了smartupload实现文件上传时获取表单数据的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2017-01-09
  • JavaScript+html5 canvas绘制的小人效果

    这篇文章主要介绍了JavaScript+html5 canvas绘制的小人效果,涉及JavaScript结合html5 canvas图形绘制及颜色随机填充的技巧,需要的朋友可以参考下...2016-01-29
  • BootStrap Progressbar 实现大文件上传的进度条的实例代码

    这篇文章主要介绍了BootStrap Progressbar 实现大文件上传的进度条的实例代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-07-01
  • HTML5 FileReader对象的具体使用方法

    这篇文章主要介绍了HTML5 FileReader对象的具体使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-30
  • JavaScript实现H5接金币功能(实例代码)

    这篇文章主要介绍了JavaScript实现H5接金币功能,本文分步骤通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23
  • javascrip+HTML5 Canvas绘制转盘抽奖

    这篇文章主要介绍了javascrip+HTML5 Canvas绘制转盘抽奖的相关资料,需要的朋友可以参考下...2016-04-22
  • HTML5实现微信拍摄上传照片功能

    这篇文章主要介绍了HTML5实现微信拍摄上传照片功能,实现HTML5 Canvas手机拍摄,本地压缩上传图片时遇到问题的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-04-27
  • recorder.js 基于Html5录音功能的实现

    这篇文章主要介绍了recorder.js 基于Html5录音功能的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-30
  • js canvas仿支付宝芝麻信用分仪表盘

    这篇文章主要为大家详细介绍了js canvas仿支付宝芝麻信用分仪表盘,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-11-22
  • 浅析HTML5 meta viewport参数

    这篇文章主要介绍了浅析HTML5 meta viewport参数的相关资料,帮助大家更好的理解和学习HTML5,感兴趣的朋友可以了解下...2020-12-08
  • HTML5实现移动端点击翻牌功能

    这篇文章主要介绍了HTML5实现移动端点击翻牌功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-12-08
  • Html5原生拖拽相关事件简介以及基础实现

    这篇文章主要介绍了Html5原生拖拽相关事件简介以及基础实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-12-08
  • 关于HTML5+ API plusready的兼容问题

    这篇文章主要介绍了HTML5+ API plusready的兼容问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-12-08
  • 详解HTML5布局和HTML5标签

    这篇文章主要介绍了HTML5布局和HTML5标签的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-12-08
  • 使用jQuery ajaxupload插件实现无刷新上传文件

    项目中会经常用到AJAX无刷新上传图片,但是iframe上传和flash插件都是比较复杂的,所以就找了一个jquery的插件。下面通过实例代码给大家介绍使用jQuery ajaxupload插件实现无刷新上传文件功能,需要的朋友参考下吧...2017-04-27
  • 又拍云异步上传实例教程详解

    这篇文章主要介绍了又拍云异步上传实例教程详解的相关资料,需要的朋友可以参考下...2016-04-23
  • H5 video poster属性设置视频封面的方法

    这篇文章主要介绍了H5 video poster属性设置视频封面的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2020-06-30
  • 关于webview适配H5上传照片或者视频文件的方法

    这篇文章主要介绍了关于webview适配H5上传照片或者视频文件的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-12-08