Question

我有一个工作进度条，可以将文件上传到AWS中的S3存储桶。这个过程没有任何问题，但有一点是进度条有点太快了。基本上，我上传一个文件，进度条在大约5秒后填满，然后我需要等待另外5秒才能使文件真正出现在存储桶中（一旦上传完成，页面就会刷新）。对于大文件，我等待5分钟或更长时间才能上传，但几秒后我看到进度条为100％。这是代码：

<form class="uploadForm" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="button" class="btn btn-info" id="upload" value="Choose a file">
    <input type="file" id="uploadFile">
    <input type="submit" class="btn btn-primary" id="uploadButton" value="Upload">
</form>
<div class="progress">
    <div id="progressBar" class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>

这是我的ajax / jquery代码：

$.ajax({
  xhr: function(){
    var xhr = new window.XMLHttpRequest();
    xhr.upload.addEventListener('progress', function(e){
        if(e.lengthComputable) {
          var percent = Math.round((e.loaded / e.total) * 100);
          $('#progressBar').attr('aria-valuenow', percent).css('width', percent + "%").text(percent + "%");
        }
    });
    return xhr;
  },
  url: "{% url 'project:uploadFile' %}",
  type: 'post',
  data: fileData,
  cache: false,
  processData: false,
  contentType: false,
  success: function(data){
    location.reload();
  }
});

所以在文件上传后页面刷新并且文件在那里但进度条并没有真正反映真正的上传进度。我做错了什么？

Jquery和ajax进度条达到100％太快了

0 个答案: