1.圖片上傳輸入框

<input type="file" name="" class="fileUpload" accept="image/*" capture="camera"/>

2.上面時候觸發onchange

$('.fileUpload').on('change', function () {
    id = $(this).parent().attr("id");
    //上傳成功移除file input
    $(this).parent().children().remove();
    var _this = $(this)[0],
        _file = _this.files[0],//裡面存放是圖片資訊
        fileType = _file.type;
    console.log(_file.size);
    if(/image\/\w+/.test(fileType)){
        $.showLoading("圖片上傳中...");
        var fileReader = new FileReader();
        fileReader.lastModifiedDate = _file.lastModifiedDate
        fileReader.name = _file.name
        fileReader.readAsDataURL(_file);
        fileReader.onload = function(event){
            var result = event.target.result;   //返回的dataURL
            var image = new Image();
            image.src = result;
            image.onload = function(){  //建立一個image物件，給canvas繪製使用
                //通過canvas生成base64字串，後臺會解析這個字串，dataURL是最終生成的字串
 

              var canvas = document.createElement("canvas");
              canvas.width = this.width;
              canvas.height = this.height;
              var c = canvas.getContext("2d");
              c.drawImage(this, 0, 0, this.width, this.height);
              var dataURL = canvas.toDataURL("image/jpeg");
 

$.post(ctx + '/base/front/photoInfo/uploadPicture.sy',{ 'file': dataURL, //base64字串 'fileDate': (typeof (event.target.lastModifiedDate) != 'undefined' ? event.target.lastModifiedDate : new Date()).Format("yyyy-MM-dd hh:mm:ss"),//圖片修改時間，通過這個來判斷是否是直接拍攝的照片 'fileName': event.target.name//照片名稱 },function(data, code){   $.hideLoading(); $.modal({ title: ' ', text: "上傳成功！" }); },'json'); } } }else{ $.modal({ title: ' ', text: "請選擇圖片格式檔案！" }); }});

3.後臺程式碼：

1.在Controller或者Action中呼叫，所需的引數file是上面post請求中所攜帶的dataURL，即base64字串。FileUpload是自己寫的一個Class，進行處理base64字串

FileUpload upload = new FileUpload(file.split(",")[1]);
JSONObject jsonObject = upload.uploadFlowFile();//savePath

2.在FileUpload中的方法，下面用到的fileFlow引數是上面new FileUpload時傳進的引數

用到的是 sun.misc.BASE64Decoder包

        /**
	 * 方法名稱：
	 * 方法描述：上傳檔案
	 * 建立時間：2015-9-29 下午1:39:03
	 */
	public JSONObject uploadFlowFile() throws Exception{
		JSONObject json=new JSONObject();
		try {
			finishedFlowUpload("uploadPath");
			json.put("msg", this.getSavePath());
			json.put("fileName", this.getFiledataFileName());
			json.put("savePath", this.getSavePath());
			json.put("status", true);
		} catch (Exception e) {
			e.printStackTrace();
			json.put("status", false);
		} 
		return json;
	}

protected void finishedFlowUpload(String savePathKey) throws Exception {
    	// 根據伺服器的檔案儲存地址和原檔名建立目錄檔案全路徑
    	String dstPath = null; 
    	// 儲存路徑
    	String bsPath = null;
    	// 檔案型別
    	String fileType = ".png";
    	String uuidName = null;
    	if(null!=savePathKey){
    		dstPath = ConfigUtil.get(savePathKey);//spring boot配置的儲存路徑
    	}  
    	if(null==dstPath||"".equals(dstPath)){
    		dstPath = ServletActionContext.getServletContext().getRealPath("/");
    	}
    	bsPath = "/" + DateUtil.dateToString(DateUtil.getNow(),DateUtil.SYS_DATE_FORMAT) + "/";
    	File f1 = new File(dstPath+bsPath);
    	if (!f1.exists()) {
    		f1.mkdirs();
    	}
    	
    	uuidName = UUID.randomUUID().toString();
    	bsPath = bsPath + uuidName + fileType;
    	dstPath = dstPath + bsPath;
    	File dstFile = new File(dstPath);
    	copyFlow(fileFlow, dstFile);
    	setSavePath(new ArrayList<String>());
    	this.getSavePath().add(bsPath);
}

protected static void copyFlow(String fileInputStream, File dst) {
        OutputStream out = null;
        try {
            out = new BufferedOutputStream(new FileOutputStream(dst),
                    BUFFER_SIZE);
            BASE64Decoder base64Decoder = new BASE64Decoder();
            byte[] result = base64Decoder.decodeBuffer(fileInputStream);//解碼
            for (int i = 0; i < result.length; ++i) {
	            if (result[i] < 0) {// 調整異常資料
	            	result[i] += 256;
	            }
            }
            out.write(result);
            out.flush();
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            if (null != out) {
                try {
                    out.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    }

參考連結：