posts - 1,  comments - 3,  trackbacks - 0
          直接提交base64編碼圖片數據,過大的話后臺會出現轉發錯誤問題。
          一個不錯的解決方式就是將base64編碼的圖片數據轉換為Blob(與File相似)并添加到form中提交。下面是代碼:

          /**
           * @param base64Codes
           *            圖片的base64編碼
           
          */
          function sumitImageFile(base64Codes){
              var form=document.forms[0];
              
              var formData = new FormData(form);   //這里連帶form里的其他參數也一起提交了,如果不需要提交其他參數可以直接FormData無參數的構造函數
              
              //convertBase64UrlToBlob函數是將base64編碼轉換為Blob
              formData.append("imageName",convertBase64UrlToBlob(base64Codes));  //append函數的第一個參數是后臺獲取數據的參數名,和html標簽的input的name屬性功能相同
              
              //ajax 提交form
              $.ajax({
                  url : form.action,
                  type : "POST",
                  data : formData,
                  dataType:"text",
                  processData : false,         // 告訴jQuery不要去處理發送的數據
                  contentType : false,        // 告訴jQuery不要去設置Content-Type請求頭
                  
                  success:function(data){
                      window.location.href="${ctx}"+data;
                  },
                  xhr:function(){            //在jquery函數中直接使用ajax的XMLHttpRequest對象
                      var xhr = new XMLHttpRequest();
                      
                      xhr.upload.addEventListener("progress", function(evt){
                          if (evt.lengthComputable) {
                              var percentComplete = Math.round(evt.loaded * 100 / evt.total);  
                              console.log("正在提交."+percentComplete.toString() + '%');        //在控制臺打印上傳進度
                          }
                      }, false);
                      
                      return xhr;
                  }
                  
              });
          }

          /**
           * 將以base64的圖片url數據轉換為Blob
           * @param urlData
           *            用url方式表示的base64圖片數據
           
          */
          function convertBase64UrlToBlob(urlData){
              
              var bytes=window.atob(urlData.split(',')[1]);        //去掉url的頭,并轉換為byte
              
              //處理異常,將ascii碼小于0的轉換為大于0
              var ab = new ArrayBuffer(bytes.length);
              var ia = new Uint8Array(ab);
              for (var i = 0; i < bytes.length; i++) {
                  ia[i] = bytes.charCodeAt(i);
              }

              return new Blob( [ab] , {type : 'image/png'});
          }

          上面的代碼在chrome中測試通過,其他瀏覽器未測試。
          @Author :zlong


          @Source:
          @Author:zlong
          posted on 2013-11-10 01:29 jidebingfeng 閱讀(24496) 評論(3)  編輯  收藏


          FeedBack:
          # re: javascript將base64編碼的圖片數據轉換為file并提交[未登錄]
          2016-02-23 16:05 | aa
          轉blob 不兼容怎么做?  回復  更多評論
            
          # re: javascript將base64編碼的圖片數據轉換為file并提交
          2016-04-22 14:26 | Rhine
          太棒了,試了好多方法,終于看到這個了!感謝  回復  更多評論
            
          # re: javascript將base64編碼的圖片數據轉換為file并提交
          2016-08-16 15:23 | njbble
          感謝  回復  更多評論
            

          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
          <2016年4月>
          272829303112
          3456789
          10111213141516
          17181920212223
          24252627282930
          1234567

          常用鏈接

          留言簿

          隨筆分類

          隨筆檔案

          文章檔案

          搜索

          •  

          最新評論

          主站蜘蛛池模板: 郯城县| 三穗县| 枣强县| 盐津县| 安吉县| 富川| 开化县| 迭部县| 北宁市| 武汉市| 陇西县| 高雄县| 和龙市| 瓮安县| 南漳县| 泸水县| 武鸣县| 邢台市| 海盐县| 乌兰县| 鹤庆县| 郑州市| 修水县| 峨边| 隆子县| 常山县| 阿瓦提县| 万山特区| 长春市| 陆川县| 商河县| 西乡县| 南雄市| 称多县| 大兴区| 永泰县| 安义县| 禹城市| 石狮市| 义马市| 广西|