HTML5+Canvas調(diào)用手機拍照功能實現(xiàn)圖片上傳(下)

上一篇只講到前臺操作,這篇專門涉及到Java后臺處理,前臺通過Ajax提交將Base64編碼過的圖片數(shù)據(jù)信息傳到Java后臺,然后Java這邊進行接收處理,通過對圖片數(shù)據(jù)信息進行Base64解碼,之后使用流將圖片數(shù)據(jù)信息上傳至服務器進行保存,并且將圖片的路徑地址存進數(shù)據(jù)庫。

網(wǎng)站的建設創(chuàng)新互聯(lián)建站專注網(wǎng)站定制,經(jīng)驗豐富,不做模板,主營網(wǎng)站定制開發(fā).小程序定制開發(fā),H5頁面制作!給你煥然一新的設計體驗!已為軟裝設計等企業(yè)提供專業(yè)服務。

大家可以點此鏈接查看前臺本地壓縮上傳的處理:

HTML5+Canvas+jQuery調(diào)用手機拍照功能實現(xiàn)圖片上傳(上)

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編碼過的圖片數(shù)據(jù)信息,對字節(jié)數(shù)組字符串進行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);//保存路徑 
     
    //判斷數(shù)據(jù)庫中的路徑是否存在,并且文件夾中的文件是否存在(判斷是否上傳成功的標志) 
    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);//執(zhí)行狀態(tài)保存操作 
    } 
     
    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/"); 
    //如果此文件夾不存在則創(chuàng)建一個 
    File f = new File(imgPath); 
    if(!f.exists()){ 
      f.mkdir(); 
    } 
    //拼接文件名稱,不存在就創(chuàng)建 
    imgPath = imgPath + "/" + fileName + ".jpg"; 
    f = new File(imgPath); 
    if(!f.exists()){ 
      f.mkdir(); 
    } 
     
    log.info("====文件保存的位置:"+imgPath); 
     
    //使用BASE64對圖片文件數(shù)據(jù)進行解碼操作 
    BASE64Decoder decoder = new BASE64Decoder(); 
    try { 
      //通過Base64解密,將圖片數(shù)據(jù)解密成字節(jié)數(shù)組 
      byte[] bytes = decoder.decodeBuffer(fileData); 
      //構造字節(jié)數(shù)組輸入流 
      ByteArrayInputStream bais = new ByteArrayInputStream(bytes); 
      //讀取輸入流的數(shù)據(jù) 
      BufferedImage bi = ImageIO.read(bais); 
      //將數(shù)據(jù)信息寫進圖片文件中 
      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; 
  } 

好了,到這里就全部結(jié)束了,這就是HTML5+jQuery+Canvas調(diào)用手機拍照功能實現(xiàn)圖片上傳的全部實現(xiàn)過程,總感覺自己的思路有些混亂,嗯,慢慢進步吧!

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)站題目:HTML5+Canvas調(diào)用手機拍照功能實現(xiàn)圖片上傳(下)
當前路徑:http://www.muchs.cn/article4/jdocie.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站制作域名注冊、自適應網(wǎng)站電子商務、品牌網(wǎng)站設計、靜態(tài)網(wǎng)站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁設計