結合springmvc，使用ajax上傳base64圖片資料_上傳檔案

注（其他應用）： 使用canvas畫布 進行html 中所需的dom元素，進行繪圖，使用 toDataUrl轉換成base64 編碼 上傳圖片

一、前端：

<input type="file" id="myImage" name="myImage"/>  

1 1

<script type="text/javascript">      $("#myImage").bind("change",function(){        uploadFile($(this));    });    //通過onChange直接擷取base64資料q   function uploadFile(file){        var f = file.files[0];        var reader = new FileReader();        reader.onload = function(){            var data = e.target.result;            if (data.lastIndexOf('data:base64') != -1) {                  data = data.replace('data:base64', 'data:image/jpeg;base64');            } else if (data.lastIndexOf('data:,') != -1) {                  data = data.replace('data:,', 'data:image/jpeg;base64,');            }            if(isCanvasSupported()){            }else{                alert("您的瀏覽器不支援");            }        };        reader.onerror = function(){            console.log("上傳失敗了 ");        }        reader.readAsDataURL(f);    }    //ajax非同步上傳    function ajaxUploadBase64File(base64Data){        var url = window.location.protocol + '//' + window.location.host + "/register/uploadBase64";        $.ajax({            url:url,            type:"post",            data:{base64Data:base64Data},            dataType:"json",            success:function(data){                if(data.success == true){                    console.log("上傳成功");                }else{                    console.log("上傳失敗");                }            },            error:function(){                console.log("上傳失敗");            }        });    };     //是否支援canvas    function isCanvasSupported(){        var elem = document.createElement('canvas');        return !!(elem.getContext && elem.getContext('2d'));    };</script>  

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63

二、後台：

    @RequestMapping(value="/uploadBase64",method=RequestMethod.POST)    @ResponseBody    public ActionResult<Map<String,String>> base64UpLoad(@RequestParam String base64Data, HttpServletRequest request, HttpServletResponse response){          ActionResult<Map<String,String>> result = new ActionResult<Map<String,String>>();        try{              logger.debug("上傳檔案的資料："+base64Data);            String dataPrix = "";            String data = "";            logger.debug("對資料進行判斷");            if(base64Data == null || "".equals(base64Data)){                throw new Exception("上傳失敗，上傳圖片資料為空白");            }else{                String [] d = base64Data.split("base64,");                if(d != null && d.length == 2){                    dataPrix = d[0];                    data = d[1];                }else{                    throw new Exception("上傳失敗，資料不合法");                }            }            logger.debug("對資料進行解析，擷取檔案名稱和流資料");            String suffix = "";            if("data:image/jpeg;".equalsIgnoreCase(dataPrix)){//data:image/jpeg;base64,base64編碼的jpeg圖片資料                suffix = ".jpg";            } else if("data:image/x-icon;".equalsIgnoreCase(dataPrix)){//data:image/x-icon;base64,base64編碼的icon圖片資料                suffix = ".ico";            } else if("data:image/gif;".equalsIgnoreCase(dataPrix)){//data:image/gif;base64,base64編碼的gif圖片資料                suffix = ".gif";            } else if("data:image/png;".equalsIgnoreCase(dataPrix)){//data:image/png;base64,base64編碼的png圖片資料                suffix = ".png";            }else{                throw new Exception("上傳圖片格式不合法");            }            String tempFileName = getRandomFileName() + suffix;            logger.debug("組建檔案名為："+tempFileName);            //因為BASE64Decoder的jar問題，此處使用spring架構提供的工具包            byte[] bs = Base64Utils.decodeFromString(data);            try{                //使用apache提供的工具類操作流                FileUtils.writeByteArrayToFile(new File(Global.getConfig(UPLOAD_FILE_PAHT), tempFileName), bs);              }catch(Exception ee){                throw new Exception("上傳失敗，寫入檔案失敗，"+ee.getMessage());            }            Map<String,String> map =new HashMap<String,String>();               map.put("tempFileName", tempFileName);            result.setResultMessage("上傳成功");            result.setData(map);            logger.debug("上傳成功");        }catch (Exception e) {              logger.debug("上傳失敗,"+e.getMessage());            result.setSuccess(false);            result.setResultMessage("上傳失敗,"+e.getMessage());          }          return result;    }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

參考： 
Base64編碼與圖片互轉、 
JAVA 把base64圖片資料轉為本地圖片、 
如何把圖片轉換成base64在後台轉換成圖片放在本地