在提交时查找表单的进度

时间:2013-11-15 13:37:14

标签: javascript php ajax progress

我有一个包含许多文件上传的表单,表单需要一段时间才能提交。有没有办法使用js或jquery或php来获取表单提交的进度?

1 个答案:

答案 0 :(得分:3)

是的,因为XHR更新可以使用HTML5(客户端,纯javascript)。请查看html5rocks.com上的XHR updates,特别是uploading file or blob详细信息:此处为:

<强> HTML

<progress min="0" max="100" value="0">0% complete</progress>

<强> JS

function upload(blobOrFile) {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/server', true);
  xhr.onload = function(e) { ... };

  // Listen to the upload progress.
  var progressBar = document.querySelector('progress');
  xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
      progressBar.value = (e.loaded / e.total) * 100;
      progressBar.textContent = progressBar.value; // Fallback for unsupported browsers.
    }
  };

  xhr.send(blobOrFile);
}

upload(new Blob(['hello world'], {type: 'text/plain'}));