5

XMLHttpRequest 2 を使用して Transloadit (ファイル処理サービス) にファイルをアップロードする作業ファイル アップロード フォームがあります。デスクトップと Android の両方で、進行状況イベントが Firefox と Chrome で正しく発生します。しかし、Android (4.0) ストック ブラウザはこれらのイベントを発生させないため、私のサイトのユーザーに対して進行状況バーが機能しません。XHR2 と ProgressEvent は 3.0 以降の Android でサポートされていると思われるため、何が起こっているのかわかりません。

コードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Upload test</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link href="/assets/application.css" media="all" rel="stylesheet" type="text/css" /> <!-- twitter bootstrap -->
  <script type="text/javascript">

    var onprogress = function(e)
    {
      var $status = $('.status');
      $status.text('onprogress: ' + (e.loaded / e.total) * 75 + '<br>');

      if (e.lengthComputable) {
        setProgress((e.loaded / e.total) * 75);
      }
    }

    var setProgress = function(percent) {
      percent = percent+'%';
      var $progressBar = $('.progress .bar');
      var $status = $('.status');
      $progressBar.css('width', percent);
      $progressBar.text(percent);
      $status.text(percent);
    };

    var createAttachment = function(file) {
      var params = {"blocking": true,"auth":{"key":"XXX"},"template_id":"XXX"}
      var xhr = new XMLHttpRequest();
      var data = new FormData();

      data.append('params', JSON.stringify(params));
      data.append('attachment[file]', file);

      var evtReceiver = xhr.upload || xhr;
      evtReceiver.addEventListener('progress', onprogress, false);
      xhr.onload = function(e) {
        var resp = JSON.parse(e.target.response)
        $('.image').append($('<img src="' + resp.results['android-thumb'][0].url + '">'))
        setProgress(100);
      };

      xhr.open('POST', 'http://api2.transloadit.com/assemblies', true);
      xhr.send(data);

    };


    $(document).ready(function() {
      $('input[type=file]').on('change', function(event) {
        createAttachment(event.target.files[0]);
      });
    });
  </script>

</head>

<body>

<input type="file" name="my_file">

<div class="progress progress-striped active">
  <div class="bar" style="width: 0;"></div>
</div>

<div class="status"></div>

<div class="image"></div>

</body>
</html>
4

1 に答える 1

0

progress イベントは、Android ブラウザーの Chromium バージョンでサポートされています。

Android 4.4 (API レベル 19) では、Chromium に基づく新しいバージョンの WebView が導入されています。この変更により、WebView のパフォーマンスと、HTML5、CSS3、および JavaScript の標準サポートがアップグレードされ、最新の Web ブラウザーに一致するようになります。WebView を使用するすべてのアプリは、Android 4.4 以降で実行されている場合、これらのアップグレードを継承します。

この API を使用するには、4.4 にアップグレードしてください。

参考文献

于 2016-12-01T18:24:17.223 に答える