安卓中HTML5圖片上傳實例詳解

應用的平台環境：安卓webview;

涉及的技術點：

（1） ：在開發中，安卓webview預設點擊無法呼叫檔案選擇與相機拍照（其他的裝置ios等瀏覽器沒有此問題），需要讓安卓開發同學在程式碼調整即可；

（2） 點擊選擇圖片後如何展示在頁面上呢？很多開發人員估計是直接取得 this.value，這是錯誤的，不可行。有2個API可以現實，new FileReader與window.URL.createObjectURL（最優）；

　　new FileReader的實作如下：

 
 upload

##new FileReader的實作如下：

#

<input>
 <img  src="/static/imghwm/default1.png" data-src="" class="lazy" alt="安卓中HTML5圖片上傳實例詳解" >
 <button>upload</button>
 <script>
  var o_file = document.getElementById(&#39;j-file&#39;),
      o_btn = document.getElementById(&#39;j-btn&#39;),
      o_img = document.getElementById(&#39;j-img&#39;);

  o_file.addEventListener(&#39;change&#39;,function(event){      var file = event.target.files[0];      if(!file) return;      var url = window.URL.createObjectURL(file);      if(/image/.test(file.type)){
          o_img.setAttribute(&#39;src&#39;,url);
      }else{
          console.log(&#39;请选择图片&#39;);
      }
  },false);

  o_btn.onclick = function(){      var data = new FormData();
      data.append(&#39;file_a&#39;,o_file.files[0]);
      data.append(&#39;text&#39;,&#39;test&#39;);
        console.log(data);
  } </script>

在安卓webview實戰中，讀取與寫入速度相當慢，不建議； //-------------- -------------------------------------------------- -------------------------

window.URL.createObjectURL實作如下：

#

<input>
 <img  src="/static/imghwm/default1.png" data-src="" class="lazy" alt="安卓中HTML5圖片上傳實例詳解" >
 <button>upload</button>
 <script>
  var o_file = document.getElementById(&#39;j-file&#39;),
      o_btn = document.getElementById(&#39;j-btn&#39;),
      o_img = document.getElementById(&#39;j-img&#39;),
      target_file = null;

  o_file.addEventListener(&#39;change&#39;,function(event){      var file = event.target.files[0];      if(!file) return;
      target_file = file;      var url = window.URL.createObjectURL(target_file);      if(/image/.test(target_file.type)){
          o_img.setAttribute(&#39;src&#39;,url);
      }else{
          console.log(&#39;请选择图片&#39;);
      }
  },false);

  o_btn.onclick = function(){      if(!target_file) return;      //数据处理  var data = new FormData();
      data.append(&#39;key&#39;,target_file);    
      var xhr = new XMLHttpRequest();      if(xhr.upload){
        xhr.upload.addEventListener("progress", function(e){          var loaded = e.loaded;    //已经上传大小情况   var tot = e.total;      //附件总大小   var per = Math.floor(100*loaded/tot);  //已经上传的百分比           console.log(per+&#39;%&#39;);//进度        }, false);
      }
    
      xhr.onreadystatechange = function(e) {          if (xhr.readyState == 4) {if (xhr.status >=200&&xhr.status<300||xhr.status==304) {//上传成功                             }
          }
      }; 
      xhr.onloadend = function(){//无论失败或成功      }
      xhr.onerror = function(){          
          //网络失败      }      // 开始上传      xhr.open("POST",&#39;上传地址&#39;, true); 
      xhr.send(data); 
  } </script>

這技術的好處是可以不必把檔案內容讀取到javascript中，而是直接使用檔案內容，速度很快；# （3）如何講圖片資料透過XHR物件傳遞給服務端呢？ new FormData()，為序列化表單以及創建與表單格式相同的資料（XHR傳輸）提供了實現，FormData不必明確在xhr物件上設定請求頭部（如果是表單裡面圖片上傳，enctype需要設定multipart/form -data），XHR能自動識別，實例方法.append(key,value)自訂資料;

#完整的程式碼範例如下：

##rrreee### ### ###

以上是安卓中HTML5圖片上傳實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！