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 閱讀(24497) 評論(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年8月>
          31123456
          78910111213
          14151617181920
          21222324252627
          28293031123
          45678910

          常用鏈接

          留言簿

          隨筆分類

          隨筆檔案

          文章檔案

          搜索

          •  

          最新評論

          主站蜘蛛池模板: 平山县| 图木舒克市| 景宁| 松滋市| 汕尾市| 盱眙县| 平罗县| 临沭县| 安徽省| 类乌齐县| 驻马店市| 遂溪县| 三穗县| 怀来县| 梨树县| 吉水县| 德清县| 鹤壁市| 雅安市| 临湘市| 即墨市| 清水河县| 徐水县| 正宁县| 桂林市| 普陀区| 灵寿县| 蓬安县| 卫辉市| 安多县| 通州市| 西林县| 红桥区| 烟台市| 镇雄县| 历史| 寿宁县| 双峰县| 浦北县| 巴中市| 那坡县|