HTML5+Canvas調(diào)用手機(jī)拍照功能實(shí)現(xiàn)圖片上傳(下)
上一篇只講到前臺(tái)操作,這篇專(zhuān)門(mén)涉及到Java后臺(tái)處理,前臺(tái)通過(guò)Ajax提交將Base64編碼過(guò)的圖片數(shù)據(jù)信息傳到Java后臺(tái),然后Java這邊進(jìn)行接收處理,通過(guò)對(duì)圖片數(shù)據(jù)信息進(jìn)行Base64解碼,之后使用流將圖片數(shù)據(jù)信息上傳至服務(wù)器進(jìn)行保存,并且將圖片的路徑地址存進(jìn)數(shù)據(jù)庫(kù)。
大家可以點(diǎn)此鏈接查看前臺(tái)本地壓縮上傳的處理:
HTML5+Canvas+jQuery調(diào)用手機(jī)拍照功能實(shí)現(xiàn)圖片上傳(上)
ok,廢話不多說(shuō)了,直接貼代碼吧。
1、前臺(tái)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、后臺(tái)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編碼過(guò)的圖片數(shù)據(jù)信息,對(duì)字節(jié)數(shù)組字符串進(jìn)行Base64解碼
String imgPath = uploadFile(fileData,liceneName);//進(jìn)行文件上傳操作,上傳到服務(wù)器中存放(這里是上傳到服務(wù)器項(xiàng)目文件夾中存到)
boolean result = false;//最終上傳成功與否的標(biāo)志
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ù)庫(kù)中的路徑是否存在,并且文件夾中的文件是否存在(判斷是否上傳成功的標(biāo)志)
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){
//在自己的項(xiàng)目中構(gòu)造出一個(gè)用于存放用戶照片的文件夾
String imgPath = this.getServletContext().getRealPath("/uploads/");
//如果此文件夾不存在則創(chuàng)建一個(gè)
File f = new File(imgPath);
if(!f.exists()){
f.mkdir();
}
//拼接文件名稱(chēng),不存在就創(chuàng)建
imgPath = imgPath + "/" + fileName + ".jpg";
f = new File(imgPath);
if(!f.exists()){
f.mkdir();
}
log.info("====文件保存的位置:"+imgPath);
//使用BASE64對(duì)圖片文件數(shù)據(jù)進(jìn)行解碼操作
BASE64Decoder decoder = new BASE64Decoder();
try {
//通過(guò)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ù)信息寫(xiě)進(jìn)圖片文件中
ImageIO.write(bi, "jpg", f);// 不管輸出什么格式圖片,此處不需改動(dòng)
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)用手機(jī)拍照功能實(shí)現(xiàn)圖片上傳的全部實(shí)現(xiàn)過(guò)程,總感覺(jué)自己的思路有些混亂,嗯,慢慢進(jìn)步吧!
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Javascript保存網(wǎng)頁(yè)為圖片借助于html2canvas庫(kù)實(shí)現(xiàn)
- javascript結(jié)合canvas實(shí)現(xiàn)圖片旋轉(zhuǎn)效果
- JavaScript+html5 canvas實(shí)現(xiàn)圖片破碎重組動(dòng)畫(huà)特效
- HTML5+Canvas調(diào)用手機(jī)拍照功能實(shí)現(xiàn)圖片上傳(上)
- 用canvas 實(shí)現(xiàn)個(gè)圖片三角化(LOW POLY)效果
- HTML5 canvas 9繪制圖片實(shí)例詳解
- Canvas + JavaScript 制作圖片粒子效果
- canvas實(shí)現(xiàn)圖片根據(jù)滑塊放大縮小效果
- canvas壓縮圖片轉(zhuǎn)換成base64格式輸出文件流
- 一步步教你利用Canvas對(duì)圖片進(jìn)行處理
相關(guān)文章
微信小程序?qū)崿F(xiàn)根據(jù)日期和時(shí)間排序功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)根據(jù)日期和時(shí)間排序功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08
JS實(shí)現(xiàn)面向?qū)ο罄^承的5種方式分析
這篇文章主要介紹了JS實(shí)現(xiàn)面向?qū)ο罄^承的5種方式,結(jié)合實(shí)例形式分析了JavaScript面向?qū)ο罄^承功能的5種常見(jiàn)實(shí)現(xiàn)方法原理與操作技巧,需要的朋友可以參考下2018-07-07
使用js解決由border屬性引起的div寬度問(wèn)題
由于border屬性引起的div寬度問(wèn)題,確實(shí)很讓人頭疼,在本文將為大家介紹下使用JS是如何解決的,感興趣的朋友不要錯(cuò)過(guò)2013-11-11
微信小程序如何在頁(yè)面跳轉(zhuǎn)時(shí)進(jìn)行頁(yè)面導(dǎo)航
小程序能夠在不同的頁(yè)面進(jìn)行跳轉(zhuǎn)切換,路由起到了至關(guān)重要的作用,下面這篇文章主要給大家介紹了關(guān)于微信小程序如何在頁(yè)面跳轉(zhuǎn)時(shí)進(jìn)行頁(yè)面導(dǎo)航的相關(guān)資料,需要的朋友可以參考下2022-09-09
webuploader實(shí)現(xiàn)上傳圖片到服務(wù)器功能
這篇文章主要為大家詳細(xì)介紹了webuploader實(shí)現(xiàn)上傳圖片到服務(wù)器功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-08-08
DataTables添加額外的查詢(xún)參數(shù)和刪除columns等無(wú)用參數(shù)實(shí)例
下面小編就為大家?guī)?lái)一篇DataTables添加額外的查詢(xún)參數(shù)和刪除columns等無(wú)用參數(shù)實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07

