HTML5+Canvas調(diào)用手機拍照功能實現(xiàn)圖片上傳(下)
上一篇只講到前臺操作,這篇專門涉及到Java后臺處理,前臺通過Ajax提交將Base64編碼過的圖片數(shù)據(jù)信息傳到Java后臺,然后Java這邊進行接收處理,通過對圖片數(shù)據(jù)信息進行Base64解碼,之后使用流將圖片數(shù)據(jù)信息上傳至服務器進行保存,并且將圖片的路徑地址存進數(shù)據(jù)庫。
大家可以點此鏈接查看前臺本地壓縮上傳的處理:
HTML5+Canvas+jQuery調(diào)用手機拍照功能實現(xiàn)圖片上傳(上)
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編碼過的圖片數(shù)據(jù)信息,對字節(jié)數(shù)組字符串進行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);//保存路徑
//判斷數(shù)據(jù)庫中的路徑是否存在,并且文件夾中的文件是否存在(判斷是否上傳成功的標志)
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);//執(zhí)行狀態(tài)保存操作
}
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){
//在自己的項目中構(gòu)造出一個用于存放用戶照片的文件夾
String imgPath = this.getServletContext().getRealPath("/uploads/");
//如果此文件夾不存在則創(chuàng)建一個
File f = new File(imgPath);
if(!f.exists()){
f.mkdir();
}
//拼接文件名稱,不存在就創(chuàng)建
imgPath = imgPath + "/" + fileName + ".jpg";
f = new File(imgPath);
if(!f.exists()){
f.mkdir();
}
log.info("====文件保存的位置:"+imgPath);
//使用BASE64對圖片文件數(shù)據(jù)進行解碼操作
BASE64Decoder decoder = new BASE64Decoder();
try {
//通過Base64解密,將圖片數(shù)據(jù)解密成字節(jié)數(shù)組
byte[] bytes = decoder.decodeBuffer(fileData);
//構(gòu)造字節(jié)數(shù)組輸入流
ByteArrayInputStream bais = new ByteArrayInputStream(bytes);
//讀取輸入流的數(shù)據(jù)
BufferedImage bi = ImageIO.read(bais);
//將數(shù)據(jù)信息寫進圖片文件中
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;
}
好了,到這里就全部結(jié)束了,這就是HTML5+jQuery+Canvas調(diào)用手機拍照功能實現(xiàn)圖片上傳的全部實現(xiàn)過程,總感覺自己的思路有些混亂,嗯,慢慢進步吧!
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- Javascript保存網(wǎng)頁為圖片借助于html2canvas庫實現(xiàn)
- javascript結(jié)合canvas實現(xiàn)圖片旋轉(zhuǎn)效果
- JavaScript+html5 canvas實現(xiàn)圖片破碎重組動畫特效
- HTML5+Canvas調(diào)用手機拍照功能實現(xiàn)圖片上傳(上)
- 用canvas 實現(xiàn)個圖片三角化(LOW POLY)效果
- HTML5 canvas 9繪制圖片實例詳解
- Canvas + JavaScript 制作圖片粒子效果
- canvas實現(xiàn)圖片根據(jù)滑塊放大縮小效果
- canvas壓縮圖片轉(zhuǎn)換成base64格式輸出文件流
- 一步步教你利用Canvas對圖片進行處理
相關(guān)文章
JavaScript查看代碼運行效率console.time()與console.timeEnd()用法
今天小編就為大家分享一篇關(guān)于JavaScript查看代碼運行效率console.time()與console.timeEnd()用法,小編覺得內(nèi)容挺不錯的,現(xiàn)在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧2019-01-01
Add Formatted Text to a Word Document
Add Formatted Text to a Word Document...2007-06-06
JS的函數(shù)調(diào)用棧stack size的計算方法
本篇文章給大家分享了關(guān)于JS的函數(shù)調(diào)用棧stack size的計算方法的相關(guān)知識點,有興趣的朋友參考學習下。2018-06-06
sortable中el-table拖拽及點擊箭頭上下移動row效果
這篇文章主要介紹了sortable中el-table拖拽及點擊箭頭上下移動row效果,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-08-08
使用javascript獲取flash加載的百分比的實現(xiàn)代碼
使用javascript獲取flash加載的百分比的實現(xiàn)代碼,方便flash小游戲判斷頁面,提高用戶體驗。2011-05-05
Web?Components使用生命周期回調(diào)函數(shù)實例詳解
這篇文章主要為大家介紹了Web?Components使用生命周期回調(diào)函數(shù)實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
js實現(xiàn)權(quán)限樹的更新權(quán)限時的全選全消功能
上一篇發(fā)了添加權(quán)限時的權(quán)限樹JS源碼,下面把更新時的也發(fā)給大家借鑒一下,因為更新時候牽扯到判斷已有權(quán)限等,所以,還要麻煩一些。2009-02-02

