posts - 1,  comments - 3,  trackbacks - 0
          直接提交base64編碼圖片數(shù)據(jù),過(guò)大的話后臺(tái)會(huì)出現(xiàn)轉(zhuǎn)發(fā)錯(cuò)誤問(wèn)題。
          一個(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無(wú)參數(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請(qǐng)求頭
                  
                  success:function(data){
                      window.location.href="${ctx}"+data;
                  },
                  xhr:function(){            //在jquery函數(shù)中直接使用ajax的XMLHttpRequest對(duì)象
                      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中測(cè)試通過(guò),其他瀏覽器未測(cè)試。
          @Author :zlong


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


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

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


          網(wǎng)站導(dǎo)航:
           
          <2016年4月>
          272829303112
          3456789
          10111213141516
          17181920212223
          24252627282930
          1234567

          常用鏈接

          留言簿

          隨筆分類

          隨筆檔案

          文章檔案

          搜索

          •  

          最新評(píng)論

          主站蜘蛛池模板: 武冈市| 西宁市| 武城县| 鹤壁市| 安龙县| 两当县| 新闻| 上蔡县| 秭归县| 禹州市| 辽宁省| 和硕县| 砀山县| 阳西县| 辽阳市| 永安市| 新密市| 南漳县| 隆安县| 康平县| 康乐县| 东莞市| 营口市| 奉节县| 监利县| 宁乡县| 观塘区| 中牟县| 融水| 炎陵县| 灵武市| 株洲市| 梁河县| 启东市| 桂平市| 秦安县| 涞源县| 泰顺县| 青州市| 南陵县| 栖霞市|