Android原生浏览器中没有XMLHttpRequest 2的进度。

5
我有一个工作的文件上传表单,使用XMLHttpRequest 2将文件上传到Transloadit(一个文件处理服务)。进度事件在Firefox和Chrome中正确触发,包括桌面版和Android版。但是,Android (4.0)原生浏览器不会触发这些事件,因此我的进度条对于我网站的这些用户无效。由于自从3.0版本起,Android应该支持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>

可能是从PHP脚本获取XMLHttpRequest进度的重复问题。 - Paul Sweatte
1个回答

0

进度事件在Android浏览器的Chromium版本中得到支持:

Android 4.4(API等级19)引入了一个基于Chromium的新版WebView. 这个变化提高了WebView性能和标准支持,使其与最新的Web浏览器相匹配。任何使用WebView的应用程序在Android 4.4及更高版本上运行时都将继承这些升级。

升级到4.4以使用此API。

参考资料


我的手机已经升级到Android 6.0.1。问题不在我身上,而是在我的网站用户身上。 - Hernan S.

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接