HTML5+Canvas调用手机拍照功能实现图片上传(下)
上一篇只讲到前台操作,这篇专门涉及到Java后台处理,前台通过Ajax提交将Base64编码过的图片数据信息传到Java后台,然后Java这边进行接收处理,通过对图片数据信息进行Base64解码,之后使用流将图片数据信息上传至服务器进行保存,并且将图片的路径地址存进数据库。
大家可以点此链接查看前台本地压缩上传的处理:
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('SuccessUpload~~~'); }elseif(result==false){ alert('ErrorUpload~~~'); } }, error:function(){ alert("ErrorLinking~"); } });
2、后台Java代码
/** *证件上传 *@paramrequest *@paramresponse *@throwsIOException */ publicvoiduploadLicence(HttpServletRequestrequest,HttpServletResponseresponse)throwsIOException{ log.info("=====================uploadLicence"); df=newSimpleDateFormat("yyyy-MM-dd"); Stringcust_tax_code=request.getParameter("cust_tax_code"); StringphoneNum=request.getParameter("phoneNum"); StringlicenceName=request.getParameter("licenceName"); StringfileData=request.getParameter("fileData");//Base64编码过的图片数据信息,对字节数组字符串进行Base64解码 StringimgPath=uploadFile(fileData,liceneName);//进行文件上传操作,上传到服务器中存放(这里是上传到服务器项目文件夹中存到) booleanresult=false;//最终上传成功与否的标志 custCheckInfo=newCustomerCheckInfo(); custCheckInfo.setCust_tax_code(cust_tax_code); custCheckInfo.setPhonenum(phoneNum); custCheckInfo.setUpdate_time(df.format(newDate())); booleansave_flag=customerService.saveRegistCertInfo(custCheckInfo);//保存路径 //判断数据库中的路径是否存在,并且文件夹中的文件是否存在(判断是否上传成功的标志) booleanis_success=isSuccessUpload(licenceName,cust_tax_code,phoneNum); if(save_flag&&is_success){ result=true; } //如果证件上传成功,则记录到记录表中 if(result){ StateRecordInforecord=newStateRecordInfo(); record.setCust_tax_code(cust_tax_code); record.setPhonenum(phoneNum); record.setState_id(state_id); saveStateRecord(record);//执行状态保存操作 } System.out.println("===result:"+result); PrintWriterpw=response.getWriter(); pw.print(result); pw.close(); }
/** *文件上传 *@paramfileData *@paramfileName *@return */ publicStringuploadFile(StringfileData,StringfileName){ //在自己的项目中构造出一个用于存放用户照片的文件夹 StringimgPath=this.getServletContext().getRealPath("/uploads/"); //如果此文件夹不存在则创建一个 Filef=newFile(imgPath); if(!f.exists()){ f.mkdir(); } //拼接文件名称,不存在就创建 imgPath=imgPath+"/"+fileName+".jpg"; f=newFile(imgPath); if(!f.exists()){ f.mkdir(); } log.info("====文件保存的位置:"+imgPath); //使用BASE64对图片文件数据进行解码操作 BASE64Decoderdecoder=newBASE64Decoder(); try{ //通过Base64解密,将图片数据解密成字节数组 byte[]bytes=decoder.decodeBuffer(fileData); //构造字节数组输入流 ByteArrayInputStreambais=newByteArrayInputStream(bytes); //读取输入流的数据 BufferedImagebi=ImageIO.read(bais); //将数据信息写进图片文件中 ImageIO.write(bi,"jpg",f);//不管输出什么格式图片,此处不需改动 bais.close(); }catch(IOExceptione){ log.error("e:{}",e); } returnimgPath; }
/** *判断是否成功上传 *@return */ publicbooleanisSuccessUpload(StringlicenceName,Stringcust_tax_code,Stringphonenum){ booleanflag=false; StringlicencePath="";//证件图片上传成功之后保存的路径 custCheckInfo=customerService.getCustomerCheckInfo(cust_tax_code,phonenum); licencePath=custCheckInfo.getTax_regist_cert(); //判断证件路径不为空并且在上传存放的文件夹中存在,就表明以上传成功 Filef=newFile(licencePath); if(licencePath.length()>0&&f.exists()){ flag=true; } returnflag; }
好了,到这里就全部结束了,这就是HTML5+jQuery+Canvas调用手机拍照功能实现图片上传的全部实现过程,总感觉自己的思路有些混乱,嗯,慢慢进步吧!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。