1. 程式人生 > >HTML5+Canvas+jQuery呼叫手機拍照功能實現圖片上傳(二)

HTML5+Canvas+jQuery呼叫手機拍照功能實現圖片上傳(二)

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