這篇文章主要為大家詳細介紹了HTML5+Canvas調用手機拍照功能實現圖片上傳，具有一定的參考價值，感興趣的小伙伴們可以參考一下

上一篇只講到前臺操作，這篇專門涉及到Java后臺處理，前臺通過Ajax提交將Base64編碼過的圖片數據信息傳到Java后臺，然后Java這邊進行接收處理，通過對圖片數據信息進行Base64解碼，之后使用流將圖片數據信息上傳至服務器進行保存，并且將圖片的路徑地址存進數據庫。

大家可以點此鏈接查看前臺本地壓縮上傳的處理：

HTML5+Canvas調用手機拍照功能實現圖片上傳功能（圖文詳解上篇）

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編碼過的圖片數據信息，對字節(jié)數組字符串進行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);//執(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){       //在自己的項目中構造出一個用于存放用戶照片的文件夾       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對圖片文件數據進行解碼操作       BASE64Decoder decoder = new BASE64Decoder();       try {         //通過Base64解密，將圖片數據解密成字節(jié)數組         byte[] bytes = decoder.decodeBuffer(fileData);         //構造字節(jié)數組輸入流         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調用手機拍照功能實現圖片上傳的全部實現過程，總感覺自己的思路有些混亂，嗯，慢慢進步吧！