這篇文章主要為大家詳細(xì)介紹了HTML5+Canvas調(diào)用手機(jī)拍照功能實(shí)現(xiàn)圖片上傳，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

上一篇只講到前臺(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;     }

需要學(xué)習(xí)h5的同學(xué)請(qǐng)關(guān)注php中文網(wǎng)h5視頻教程，眾多h5在線視頻教程可以免費(fèi)觀看！