介绍
这篇文章将为大家详细讲解有关HTML5画布+调用手机拍照功能实现图片上传的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
到Java后台处理,前台通过Ajax提交将Base64编码过的图片数据信息传到Java后台,然后Java这边进行接收处理,通过对图片数据信息进行Base64解码,之后使用流将图片数据信息上传至服务器进行保存,并且将图片的路径地址存进数据库。
1,前台js代码:
. Ajax({美元 异步:假的,//是否异步 缓存:假的,//是否使用缓存 类型:“POST", 数据:{fileData: fileData licenceName: licenceName, cust_tax_code: cust_tax_code, phoneNum: phoneNum, state_id: state_id}, 数据类型:“json" 超时:1000, contentType: & # 39;应用程序/x-www-form-urlencoded;charset=utf - 8 # 39; url: $ (& # 39; # ctx # 39;) .val () +“CustomerCheckServlet ?行动=uploadLicence" 成功:函数(结果){ console.log(结果); 如果(结果==true) { 警报(& # 39;成功上传~ ~ ~ & # 39;); }else if(结果==false) { 警报(& # 39;错误上传~ ~ ~ & # 39;); } }, 错误:函数(){ 警报(“错误链接~“); } });
2,后台Java代码
/* * *证件上传 * @param请求 * @param响应 * @throws IOException */公共空uploadLicence (HttpServletRequest请求,HttpServletResponse响应)抛出IOException { log.info (“=====================uploadLicence"); df=new SimpleDateFormat (“yyyy-MM-dd"); 字符串cust_tax_code=request.getParameter (“cust_tax_code"); 字符串phoneNum=request.getParameter (“phoneNum"); 字符串licenceName=request.getParameter (“licenceName"); 字符串fileData=https://www.yisu.com/zixun/request.getParameter (fileData ");//Base64编码过的图片数据信息,对字节数组字符串进行Base64解码 字符串imgPath=还是(fileData liceneName);//进行文件上传操作,上传到服务器中存放(这里是上传到服务器项目文件夹中存到) 布尔结果=false;//最终上传成功与否的标志 custCheckInfo=new CustomerCheckInfo (); custCheckInfo.setCust_tax_code (cust_tax_code); custCheckInfo.setPhonenum (phoneNum); custCheckInfo.setUpdate_time (df。新日期格式(())); 布尔save_flag=customerService.saveRegistCertInfo (custCheckInfo);//保存路径//判断数据库中的路径是否存在,并且文件夹中的文件是否存在(判断是否上传成功的标志) 布尔is_success=isSuccessUpload (licenceName、cust_tax_code phoneNum); 如果(save_flag & & is_success) { 结果=true; }//如果证件上传成功,则记录到记录表中 如果(结果){ StateRecordInfo记录=new StateRecordInfo (); record.setCust_tax_code (cust_tax_code); record.setPhonenum (phoneNum); record.setState_id (state_id); saveStateRecord(纪录);//执行状态保存操作 } System.out.println(“===结果:”+结果); PrintWriter pw=response.getWriter (); pw.print(结果); pw.close (); }
/* * *文件上传 * @param fileData * @param文件名 * @return */fileData还是公共字符串(字符串,字符串文件名){//在自己的项目中构造出一个用于存放用户照片的文件夹 字符串imgPath=this.getServletContext () .getRealPath(“/上传/?;//如果此文件夹不存在则创建一个 文件f=新文件(imgPath); 如果(! f.exists ()) { f.mkdir (); }//拼接文件名称,不存在就创建 imgPath=imgPath +“/?+文件名+“.jpg"; f=新文件(imgPath); 如果(! f.exists ()) { f.mkdir (); } log.info(“====文件保存的位置:“+ imgPath);//使用BASE64对图片文件数据进行解码操作 BASE64Decoder解码器=new BASE64Decoder (); 尝试{//通过Base64解密,将图片数据解密成字节数组 byte[]字节=decoder.decodeBuffer (fileData);//构造字节数组输入流 ByteArrayInputStream姨=new ByteArrayInputStream(字节);//读取输入流的数据 BufferedImage bi=ImageIO.read(姨);//将数据信息写进图片文件中 ImageIO。写(bi,“jpg" f);//不管输出什么格式图片,此处不需改动 bais.close (); }捕捉(IOException e) { log.error (“e: {}“, e); } 返回imgPath; }
/* * *判断是否成功上传 * @return */cust_tax_code licenceName公共布尔isSuccessUpload(字符串,字符串,字符串phonenum) { 布尔标志=false; 字符串licencePath=啊?/证件图片上传成功之后保存的路径 custCheckInfo=客户服务。getCustomerCheckInfo (cust_tax_code phonenum); licencePath=custCheckInfo.getTax_regist_cert ();//判断证件路径不为空并且在上传存放的文件夹中存在,就表明以上传成功 文件f=新文件(licencePath); 如果(licencePath.length()在0,,f.exists ()) { 国旗=true; } 返回国旗; }HTML5画布+调用手机拍照功能实现图片上传的方法