Question

我有一个工作文件上传表单，它使用XMLHttpRequest 2将文件上传到Transloadit（文件处理服务）。在Firefox和Chrome中，无论是桌面还是Android，都会正确触发进度事件。但Android（4.0）股票浏览器不会触发这些事件，因此我的进度条对我网站的用户不起作用。据说Android自3.0以来支持XHR2和ProgressEvent，所以我不知道发生了什么。

代码是：

<!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>

Answer 1

Android浏览器的Chromium版本支持progress事件：

Android 4.4（API级别19）引入了基于Chromium的新版WebView。此更改升级了对HTML5，CSS3和JavaScript的WebView性能和标准支持，以匹配最新的Web浏览器。在Android 4.4及更高版本上运行时，任何使用WebView的应用程序都将继承这些升级。

升级到4.4以使用此API。

<强>参考

Migrating to WebView in Android 4.4 | Android Developers

在Android股票浏览器中没有XMLHttpRequest 2进展

1 个答案: