Question

我使用此代码上传带有ajax的文件。

$('form').submit(function(e) {
  e.preventDefault();
  var fd = new FormData(this);
  $.ajax({url: $(this).attr('action'),
          xhr: function() { // custom xhr (is the best)
    var xhr = new XMLHttpRequest();
    //load
    xhr.upload.addEventListener("load", function(evt) {
      $("#msg").text(evt.target.responseText);
    }, false);
    return xhr;
  },
  type: 'post',
  processData: false,
  contentType: false,
  data: fd,
  success: function(data) {
    // do something...    
  }});
});

我希望在上传完成后在#msg div中显示一条消息。消息是使用php打印服务器端。通常evt.target.responseText包含来自服务器的数据，但它包含[object XMLHttpRequestProgressEvent]（后者又会写入#msg）。我尝试打印evt.responseText和evt.response，但两者都返回[object XMLHttpRequestProgressEvent]。

Answer 1

将该行移至“success”回调功能块。

AJAX请求调用或其基础XMLHttpRequestObject（XHR）调用是异步执行的。 “load”是一个Level 3事件，它通知调用脚本执行的进度。可以查询evt对象的用例，例如文件上传器进度条。

“success”事件映射到readyState == 4，由onreadystatechange回调函数检查。

使用原始XHR：

xhr = new XMLHttpRequest();
xhr.open('GET', your_url, true);
xhr.onreadystatechange=function(){
  if (xhr.readyState==4){
    document.getElementById('res').innerHTML=xhr.responseText;
  } else {
    document.getElementById('res').innerHTML='loading...';
  }
}

xhr.send(null);

实际上，您可以在XHR呼叫之前显示加载文本。

跟踪文件上传进度不同：

xhr.upload.onprogress=function(e){
    if (e.lengthComputable)
       document.getElementById('res').innerHTML=Math.round(e.loaded*100/e.total)+'%';
    else document.getElementById('res').innerHTML='uploading...';
};

xhr.onload=function(e){
  //display success message
}

确保xhr.upload不为null。如果是，那么您在浏览器上没有3级AJAX支持。

使用ajax从webserver返回数据

1 个答案: