HTML5+Canvas+jQuery調用手機拍照功能實現圖片上傳（二）

標籤：jquery   base64   upload   html5+   canvas   

上一篇只講到前台操作，這篇專門涉及到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調用手機拍照功能實現圖片上傳的全部實現過程，總感覺自己的思路有些混亂，嗯，慢慢進步吧！

HTML5+Canvas+jQuery調用手機拍照功能實現圖片上傳（二）