posts - 1,  comments - 3,  trackbacks - 0
          直接提交base64編碼圖片數(shù)據(jù),過大的話后臺(tái)會(huì)出現(xiàn)轉(zhuǎn)發(fā)錯(cuò)誤問題。
          一個(gè)不錯(cuò)的解決方式就是將base64編碼的圖片數(shù)據(jù)轉(zhuǎn)換為Blob(與File相似)并添加到form中提交。下面是代碼:

          /**
           * @param base64Codes
           *            圖片的base64編碼
           
          */
          function sumitImageFile(base64Codes){
              var form=document.forms[0];
              
              var formData = new FormData(form);   //這里連帶form里的其他參數(shù)也一起提交了,如果不需要提交其他參數(shù)可以直接FormData無參數(shù)的構(gòu)造函數(shù)
              
              //convertBase64UrlToBlob函數(shù)是將base64編碼轉(zhuǎn)換為Blob
              formData.append("imageName",convertBase64UrlToBlob(base64Codes));  //append函數(shù)的第一個(gè)參數(shù)是后臺(tái)獲取數(shù)據(jù)的參數(shù)名,和html標(biāo)簽的input的name屬性功能相同
              
              //ajax 提交form
              $.ajax({
                  url : form.action,
                  type : "POST",
                  data : formData,
                  dataType:"text",
                  processData : false,         // 告訴jQuery不要去處理發(fā)送的數(shù)據(jù)
                  contentType : false,        // 告訴jQuery不要去設(shè)置Content-Type請求頭
                  
                  success:function(data){
                      window.location.href="${ctx}"+data;
                  },
                  xhr:function(){            //在jquery函數(shù)中直接使用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() + '%');        //在控制臺(tái)打印上傳進(jìn)度
                          }
                      }, false);
                      
                      return xhr;
                  }
                  
              });
          }

          /**
           * 將以base64的圖片url數(shù)據(jù)轉(zhuǎn)換為Blob
           * @param urlData
           *            用url方式表示的base64圖片數(shù)據(jù)
           
          */
          function convertBase64UrlToBlob(urlData){
              
              var bytes=window.atob(urlData.split(',')[1]);        //去掉url的頭,并轉(zhuǎn)換為byte
              
              //處理異常,將ascii碼小于0的轉(zhuǎn)換為大于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編碼的圖片數(shù)據(jù)轉(zhuǎn)換為file并提交[未登錄]
          2016-02-23 16:05 | aa
          轉(zhuǎn)blob 不兼容怎么做?  回復(fù)  更多評論
            
          # re: javascript將base64編碼的圖片數(shù)據(jù)轉(zhuǎn)換為file并提交
          2016-04-22 14:26 | Rhine
          太棒了,試了好多方法,終于看到這個(gè)了!感謝  回復(fù)  更多評論
            
          # re: javascript將base64編碼的圖片數(shù)據(jù)轉(zhuǎn)換為file并提交
          2016-08-16 15:23 | njbble
          感謝  回復(fù)  更多評論
            

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


          網(wǎng)站導(dǎo)航:
           
          <2025年6月>
          25262728293031
          1234567
          891011121314
          15161718192021
          22232425262728
          293012345

          常用鏈接

          留言簿

          隨筆分類

          隨筆檔案

          文章檔案

          搜索

          •  

          最新評論

          主站蜘蛛池模板: 双辽市| 霞浦县| 马公市| 樟树市| 监利县| 惠东县| 左权县| 翁源县| 贵南县| 巴林左旗| 获嘉县| 屏东市| 家居| 克东县| 龙游县| 淮安市| 奉化市| 肇州县| 垣曲县| 温宿县| 甘洛县| 泉州市| 安徽省| 栾城县| 东乡族自治县| 永嘉县| 西乡县| 临清市| 额济纳旗| 贡嘎县| 桐城市| 玉溪市| 新干县| 绵竹市| 海伦市| 寿光市| 留坝县| 本溪| 普兰店市| 新建县| 嵊州市|