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

Question

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

Her*_* S. 5 javascript html5 xmlhttprequest android-browser xmlhttprequest-level2

我有一个工作文件上传表单,它使用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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Pau*_*tte 0

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

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

升级到 4.4 才能使用此 API。

参考

在 Android 4.4 中迁移到 WebView | 安卓开发者

归档时间：	13 年前
查看次数：	1062 次
最近记录：	8 年，2 月前