html5 jquery拍照显示,HTML5+Canvas+jQuery调用手机拍照功能实现图片上传（二）(示例代码)...

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

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

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调用手机拍照功能实现图片上传的所有实现过程，总感觉自己的思路有些混乱。嗯，慢慢进步吧！