Présentation de HTML5+Canvas pour appeler la fonction appareil photo du téléphone mobile pour télécharger des images (Partie 2)

Cet article présente principalement HTML5+Canvas pour appeler la fonction d'appareil photo du téléphone portable pour télécharger des images en détail. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

L'article précédent n'en parlait que. Opération frontale, cet article implique spécifiquement le traitement en arrière-plan Java. Le frontal soumet les informations de données d'image codées en Base64 à l'arrière-plan Java via Ajax, puis reçoit et traite les informations de données d'image du côté Java, Base64 décode les informations. informations de données d'image, puis utilise le flux pour Les informations de données d'image sont téléchargées sur le serveur pour le stockage et l'adresse de chemin de l'image est stockée dans la base de données.

Vous pouvez cliquer sur ce lien pour afficher le traitement du téléchargement compressé local au niveau du front-end :

HTML5+Canvas+jQuery appelle la fonction de caméra du téléphone mobile pour implémenter le téléchargement d'images (Partie 1)

ok , plus de bêtises, postez simplement le code.

1. Code js front-end :

$.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. Code Java back-end

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

Étudiants qui ont besoin d'apprendre h5, veuillez faire attention aux didacticiels vidéo php Chinese Neth5, de nombreux didacticiels vidéo en ligne h5 peuvent être visionnés gratuitement !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!