HTML5+Canvas调用手机拍照功能实现图片上传（下）

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('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;

}

/**

*http:// 判断是否成功上传

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。