当前位置: 移动技术网 > IT编程>开发语言>JavaScript > HTML5+Canvas调用手机拍照功能实现图片上传(下)

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

2018年05月15日  | 移动技术网IT编程  | 我要评论

上一篇只讲到前台操作,这篇专门涉及到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调用手机拍照功能实现图片上传的全部实现过程,总感觉自己的思路有些混乱,嗯,慢慢进步吧!

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

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网