AndroidでのHTML5画像アップロード例を詳しく解説

アプリケーションプラットフォーム環境: Android Webビュー;

関連する技術的ポイント:

(1) : 開発中、Android Webビューはデフォルトでファイル選択とカメラ写真を呼び出すことができません(iOSなどの他のブラウザ)デバイスにはこの問題はありません)、Android 開発の学生にコードを調整するように依頼する必要があります

(2) 画像をクリックして選択した後にページに画像を表示するにはどうすればよいですか。おそらく多くの開発者は this.value を直接取得しますが、これは間違っており、実現不可能です。実装できる API は new FileReader と window.URL.createObjectURL (最適) の 2 つです

new FileReader は次のように実装されます:

 
 upload

実際の Android WebView では、読み書き速度が非常に遅いため、推奨されません

//-------------------------------------- -------------------------------------------------- -

window.URL.createObjectURL は次のように実装されます:

<input>
 <img  src="/static/imghwm/default1.png" data-src="" class="lazy" alt="Androidでの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>

このテクノロジーの利点は、ファイルのコンテンツを JavaScript に読み取る必要がなく、ファイルのコンテンツを直接使用できることです。これは非常に高速です

(3 ) XHR オブジェクトを介して画像データをサーバーに渡すにはどうすればよいですか? new FormData() は、フォームをシリアル化し、フォームと同じ形式でデータを作成するための実装を提供します (XHR 送信)。FormData は、xhr オブジェクトにリクエスト ヘッダーを明示的に設定する必要はありません (フォーム内の画像アップロードの場合、 enctype は multipart/form -data を設定する必要があります)、XHR はデータをカスタマイズするためにインスタンス メソッド .append(key, value) を自動的に識別できます

完全なコード例は次のとおりです。

以上がAndroidでのHTML5画像アップロード例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。