1. 程式人生 > >html5 new FileReader()生成圖片

html5 new FileReader()生成圖片

html5  使用readAsDataURL生成的base64編碼的圖片是2進位制流,其優點是減少http的請求,缺點是不能跨域快取。

注:所以在微信本地上傳圖片直接使用readAsDataURL,安卓是獲取不到圖片的,需要將其轉換為圖片,並存入伺服器,

例如:

 var reader = new FileReader();
          reader.onload = (function(theFile) {
          return function(e){
          var src=e.target.result ;
        var data=src.split(",")[1];
data=window.atob(data);
            var ia = new Uint8Array(data.length);
            for (var i = 0; i < data.length; i++) {
               ia[i] = data.charCodeAt(i);
            };
            // canvas.toDataURL 返回的預設格式就是 image/png
            var blob=new Blob([ia], {type:"image/png"});
        var fd=new FormData();/***** 如果 FormData 物件中的某個欄位值是一個 Blob 物件,則

在傳送 HTTP 請求時,代表該 Blob 物件所包含檔案的檔名的 "Content-Disposition" 請求頭的值在不同的瀏覽器下有所不同,Firefox使用了固定的字串"blob",而 Chrome 使用了一個隨機字串。*******/
fd.append('headPhototUrl',blob);
          $.ajax({
          data:fd,
          type:"post",
          dataType:"json",
          processData : false,   //使得jquery不處理請求資料
            contentType: false,  //使得jquery不設定content-type請求頭
          url:"/huahan/UploadPhoto.do",
          success:function(result){
          if(result.errorCode==0){
          $(".h_picBox .loadPic").eq(index).find("span").html("<img src='"+ result.data +"' />");
}else{
ajaxError(result.errormsg);
}
          }
          });
            };
          })(f);
          reader.readAsDataURL(f);