zoukankan      html  css  js  c++  java
  • HTML5+Canvas+jQuery调用手机拍照功能实现图片上传(二)

    上一篇仅仅讲到前台操作,这篇专门涉及到Java后台处理。前台通过Ajax提交将Base64编码过的图片数据信息传到Java后台,然后Java这边进行接收处理。通过对图片数据信息进行Base64解码,之后使用流将图片数据信息上传至server进行保存,而且将图片的路径地址存进数据库。


     大家能够点此链接查看前台本地压缩上传的处理:

    HTML5+Canvas+jQuery调用手机拍照功能实现图片上传(一)


    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);//进行文件上传操作,上传到server中存放(这里是上传到server项目目录中存到)
    		
    		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调用手机拍照功能实现图片上传的所有实现过程,总感觉自己的思路有些混乱。嗯,慢慢进步吧!

  • 相关阅读:
    求求你规范下你的代码风格
    为啥用ip不可以访问知乎,而百度却可以?
    漫画:htts是如何保证一台主机把数据安全发给另一台主机
    如何从亿量级中判断一个数是否存在?
    广播路由算法 :我是如何优雅着把悄悄话带给其他人的
    什么?你不知道0.0.0.0和255.255.255.255这两个地址是干嘛的?
    一篇文章带你学会Linux三剑客之一:awk
    你真的了解 i++, ++i 和 i+++++i 以及 i+++i++ 吗?
    通俗易懂讲解TCP流量控制机制,了解一下
    一文读懂拥塞控制
  • 原文地址:https://www.cnblogs.com/tlnshuju/p/7294347.html
Copyright © 2011-2022 走看看