如果要兼容微信端的瀏覽器，需要將圖片轉化成Base64這種格式後，並傳給服務器進行處理。如要注意一下幾個方面。
1、只允許拍照的圖片上傳。
<input type="file" capture="camera" accept="image/*" name="logo" id="file"> 只需要開啓 capture="camera" 就可以完成。
jquery獲取 文件類型的輸入框信息的方式爲
var files = $('#file').prop('files'); //通過files[0]這種方式獲取信息例如： files[0].type 這種方式獲取對象 //reader.readAsDataURL(files[0]); //讀取文件
2、兼容微信瀏覽器，不能使用input type=file 上傳文件。
思路:將圖片使用FileReader方法轉化成Base64進行處理即可
var reader = new FileReader(); //新建一個FileReaderreader.readAsDataURL(files[0]); //讀取文件 reader.onload = function(evt) { //讀取完文件之後會回來這裏 alert(evt.target.result);}生成的Base64帶有Data URI scheme的頭信息，頭文件有如下內容：
目前，Data URI scheme支持的類型有：data:,文本數據data:text/plain,文本數據data:text/html,HTML代碼data:text/html;base64,base64編碼的HTML代碼data:text/css,CSS代碼data:text/css;base64,base64編碼的CSS代碼data:text/javascript,Javascript代碼data:text/javascript;base64,base64編碼的Javascript代碼data:image/gif;base64,base64編碼的gif圖片數據data:image/png;base64,base64編碼的png圖片數據data:image/jpeg;base64,base64編碼的jpeg圖片數據data:image/x-icon;base64,base64編碼的icon圖片數據如果使用類似JSP這樣的動態語言進行處理需要將頭信息去掉後，纔是文件的Base64編碼
同樣Base64 也可以直接回顯到<img>裏面進行顯示如下代碼：
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAAA3NCSVQICAjb4U/gAAAABlBMVEX///+ZmZmOUEqyAAAAAnRSTlMA/1uRIrUAAAAJcEhZcwAACusAAArrAYKLDVoAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDkvMjAvMTIGkKG+AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAAB1JREFUCJljONjA8LiBoZyBwY6BQQZMAtlAkYMNAF1fBs/zPvcnAAAAAElFTkSuQmCC" /> 3、壓縮圖片 以最小圖片上傳服務器
通過 localResizeIMG-4.9.35 這個插件進行壓縮轉化
localResizeIMG4這個版本使用的是原生的JS，所以理論上來講能兼容所有的設備。
請從附件中將其下載
只需要引用 <script src="../dist/lrz.bundle.js"></script>就可以使用了，但要注意的是
1. 一般情況僅需引用 【lrz.bundle.js】 即可。但絕對不要刪除目錄下的【*.chunk.js】，這些文件分別對應了IOS和Android的兼容代碼，檢測到符合環境時會自動引入。2. 【lrz.all.bundle.js】是包含了所有引用了，莫名其妙的問題下就引用這個吧。例如：https://github.com/think2011/localResizeIMG/issues/63. 【*.map】文件是供調試用的，正式使用刪不刪除都沒關係，因爲僅在調試時纔會載入。具體代碼如下所示：
!doctype html><html lang="zh-cn"><meta name="viewport" content="width=device-width, user-scalable=no"><head> <meta charset="UTF-8"> <title>上傳下載組建</title></head><body> <!--後臺接收的Base64碼，這裏需要注意的是生成的Base64碼前面帶有一個頭信息，這個頭信息需要進行手工處理--> <input type="text" name="fileBase64" id="fileBase64" value=""> <!--file上傳文件--> <input type="file" capture="camera" accept="image/*" name="logo" id="file"> <!--用於顯示圖片內容--> <div id="imgView"></div><script src="../dist/lrz.bundle.js?v=09bcc24"></script><script type="text/javascript"> document.querySelector('input[type=file]').addEventListener('change', function () { var that = this; lrz(that.files[0], { width: 800 }) .then(function (rst) { //如果是ajax請求到後臺的話，代碼也在這裏寫，具體寫法請參考自帶的例子， //這裏是通過submit將數據統一提交，所以只保存到隱藏域中即可 var imgView = document.getElementById("imgView"); img = new Image(), div = document.createElement('div'), p = document.createElement('p'), sourceSize = toFixed2(that.files[0].size / 1024), resultSize = toFixed2(rst.fileLen / 1024), scale = parseInt(100 - (resultSize / sourceSize * 100)); imgView.innerHTML = "";//先清空原先數值 p.style.fontSize = 13 + 'px'; p.innerHTML = '源文件大小：<span>' + sourceSize + 'KB' + '</span> <br />' + '壓縮後大小：<span>' + resultSize + 'KB (省' + scale + '%)' + '</span> '; div.className = ''; div.appendChild(img); div.appendChild(p); img.onload = function () { document.querySelector('#imgView').appendChild(div); }; img.src = rst.base64; //保存到隱藏域中。 document.getElementById("fileBase64").value = rst.base64; return rst; }); }); function toFixed2 (num) { return parseFloat(+num.toFixed(2)); } </script></body></html>以上程序可以在HTML頁面直接調試。
效果圖：
--------------------------------Web前段的代碼完畢的分割線-------------------------------------------------
下面的需要在JSP環境下測試了
SpringMVC 後臺處理方法
JavaBean
import java.io.File;import java.text.SimpleDateFormat;import java.util.Date;import java.util.Random;import java.util.regex.Matcher;import java.util.regex.Pattern; import com.thinkgem.jeesite.common.config.Global;/** * Base64基礎JavaBean * @author taolin * */public class FileData { /** * 通過prop配置文件獲取基礎路徑 本人放到了 c:/code/下面 */ public static final String basePath = Global.getConfig("2CodeComplaintPath"); String mine;//信息 String suffix;//文件後綴 String data;//Base64原始碼 boolean isError;//判斷是否參數有誤 public boolean isError() { return isError; } /** * 源字符串 直接解析 * @param original */ public FileData(String original) { super(); String[] temps = original.split(","); try { this.mine=temps[0]; this.data=temps[1]; this.suffix = handleSuffix(mine); this.isError = true; } catch (Exception e) { // TODO: handle exception this.isError = false; } } /** * 自動解析拆分 * @param mine * @param data */ public FileData(String mine, String data) { super(); this.mine = mine; this.data = data; this.suffix = handleSuffix(mine); } public String getMine() { return mine; } public void setMine(String mine) { this.mine = mine; this.suffix = handleSuffix(mine); } public String getSuffix() { return suffix; } public void setSuffix(String suffix) { this.suffix = suffix; } public String getData() { return data; } public void setData(String data) { this.data = data; } /** * 用於解析兩個匹配字符中間的數據。 * @param mine * @return */ private String handleSuffix(String mine){ String regext = "(?<=(data:image/))(.?)*(?=(;base64))"; Pattern pattern = Pattern.compile(regext); Matcher matcher = pattern.matcher(mine); while(matcher.find()) { return matcher.group(); } return ""; } /** * 路徑+文件名 * @return 返回路徑+文件全名 */ public String createPicFullFilePath(){ return createNewDateFilePath()+File.separator+getRandomFileName()+"."+this.suffix; } /** * 路徑（文件路徑日期方式生成） * @return 返回路徑信息 */ public String createNewDateFilePath() { Date date = new Date(); String path=new SimpleDateFormat("yyyy/MM/dd").format(date); String[] tmps=path.split("/"); StringBuffer mosaic = new StringBuffer(FileData.basePath); for (String lujing : tmps) { mosaic.append(lujing+File.separator); } mosaic.deleteCharAt(mosaic.length()-1); return mosaic.toString(); } /** * 獲取隨機文件名稱 yyyyMMdd+5尾隨機數 * @return */ private String getRandomFileName() { SimpleDateFormat simpleDateFormat; simpleDateFormat = new SimpleDateFormat("yyyyMMdd"); Date date = new Date(); String str = simpleDateFormat.format(date); Random random = new Random(); int rannum = (int) (random.nextDouble() * (99999 - 10000 + 1)) + 10000;// 獲取5位隨機數 return rannum + str;// 當前時間 } }Base64轉化工具類
import java.awt.image.BufferedImage;import java.io.ByteArrayInputStream;import java.io.ByteArrayOutputStream;import java.io.File;import java.io.IOException;import java.io.InputStream; import javax.imageio.ImageIO; import sun.misc.BASE64Decoder;import sun.misc.BASE64Encoder; public class ImageUtil { private static BASE64Encoder encoder = new sun.misc.BASE64Encoder(); private static BASE64Decoder decoder = new sun.misc.BASE64Decoder(); /** * 將圖片轉換爲BASE64加密字符串. * @param imagePath 圖片路徑. * @param format 圖片格式. * @return */ public static String convertImageToByte(String imagePath, String format) { File file = new File(imagePath); BufferedImage bi = null; ByteArrayOutputStream baos = null; String result = null; try { bi = ImageIO.read(file); baos = new ByteArrayOutputStream(); ImageIO.write(bi, format == null ? "jpg" : format, baos); byte[] bytes = baos.toByteArray(); result = encoder.encodeBuffer(bytes).trim(); System.out.println("將圖片轉換爲BASE64加密字符串成功！"); } catch (IOException e) { System.out.println("將圖片轉換爲 BASE64加密字符串失敗: " + e); } finally { try { if(baos != null) { baos.close(); baos = null; } } catch (Exception e) { System.out.println("關閉文件流發生異常: " + e); } } return result; } /** * 將圖片流轉換爲BASE64加密字符串. * @param imageInputStream * @param format 圖片格式. * @return */ public static String convertImageStreamToByte(InputStream imageInputStream, String format) { BufferedImage bi = null; ByteArrayOutputStream baos = null; String result = null; try { bi = ImageIO.read(imageInputStream); baos = new ByteArrayOutputStream(); ImageIO.write(bi, format == null ? "jpg" : format, baos); byte[] bytes = baos.toByteArray(); result = encoder.encodeBuffer(bytes).trim(); System.out.println("將圖片流轉換爲BASE64加密字符串成功！"); } catch (IOException e) { System.out.println("將圖片流轉換爲 BASE64加密字符串失敗: " + e); } finally { try { if(baos != null) { baos.close(); baos = null; } } catch (Exception e) { System.out.println("關閉文件流發生異常: " + e); } } return result; } /** * 將BASE64加密字符串轉換爲圖片. * @param base64String * @param imagePath 圖片生成路徑. * @param format 圖片格式. */ public static void convertByteToImage(String base64String, String imagePath, String format) { byte[] bytes = null; ByteArrayInputStream bais = null; BufferedImage bi = null; File file = null; try { bytes = decoder.decodeBuffer(base64String); bais = new ByteArrayInputStream(bytes); bi = ImageIO.read(bais); file = new File(imagePath); ImageIO.write(bi, format == null ? "jpg" : format, file); System.out.println("將BASE64加密字符串轉換爲圖片成功！"); } catch (IOException e) { System.out.println("將BASE64加密字符串轉換爲圖片失敗: " + e); } finally { try { if(bais != null) { bais.close(); bais = null; } } catch (Exception e) { System.out.println("關閉文件流發生異常: " + e); } } } } SpringMVC調用程序
@RequestMapping(value = {"save"}) public String save( HttpServletRequest request, HttpServletResponse response, Model model) { FileData fileData = new FileData(request.getParameter("fileBase64")); //轉換並保存到本地硬盤 try { if (fileData.isError()==true) { //格式化並轉換String類型 FileUtils.forceMkdir(new File(fileData.createNewDateFilePath())); ImageUtil.convertByteToImage(fileData.getData(),fileData.createPicFullFilePath(), fileData.getSuffix()); } } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } return "modules/twocode/test1"; }保存到一個臨時文件夾中。
以上代碼真實有效，測過了呵呵
資源下載地址：
資源下載地址：
開源架構地址：
http://download.csdn.net/detail/ltllml44/9582641
http://download.csdn.net/detail/ltllml44/9582641
https://download.csdn.net/download/ltllml44/9587063
實例地址
--------------------------------------------------------------------------------------------結束的分割線-------------------------------------------------------------------------------------------------------------------------