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
          感謝  回復  更多評論
            

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


          網站導航:
           
          <2025年6月>
          25262728293031
          1234567
          891011121314
          15161718192021
          22232425262728
          293012345

          常用鏈接

          留言簿

          隨筆分類

          隨筆檔案

          文章檔案

          搜索

          •  

          最新評論

          主站蜘蛛池模板: 灵川县| 新密市| 阿城市| 石首市| 峨边| 西峡县| 瓮安县| 惠水县| 泾源县| 崇仁县| 肥城市| 郓城县| 泾阳县| 晴隆县| 八宿县| 仁怀市| 平远县| 施秉县| 广东省| 云梦县| 桦川县| 衡水市| 平顶山市| 星子县| 镇宁| 安阳市| 通辽市| SHOW| 望城县| 搜索| 常山县| 昌宁县| 长宁区| 垫江县| 邯郸县| 东山县| 彭山县| 安龙县| 阿瓦提县| 莲花县| 萝北县|