HTML5+Canvas+jQuery呼叫手機拍照功能實現圖片上傳(二)
阿新 • • 發佈:2019-01-04
上一篇只講到前臺操作,這篇專門涉及到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呼叫手機拍照功能實現圖片上傳的全部實現過程,總感覺自己的思路有些混亂,嗯,慢慢進步吧!