Question

我想ajax将文件上传到服务器并且经常更新进度条。在javascript中，我有：

xhr.open('POST',' /path/to/upload', true);
xhr.setRequestHeader("X-File-Name", file.name);
xhr.setRequestHeader("X-File-id", md5(filename+file.size));
xhr.upload.addEventListener('progress', onprogressHandler, false);
xhr.send(file);

在事件处理程序中，我有：

function onprogressHandler(event) {
    var percent = event.loaded/event.total*100;
    var $target = $(event.target);
    console.log('ok');
    console.log($target);
    console.log('Upload progress: ' + percent + '%');
}

如何获取附加此事件的xhr请求的信息，例如我发送的文件，以便我可以更新与该文件对应的进度条？

Answer 1

充分利用javascript关闭的事实。

xhr.open('POST',' /path/to/upload', true);
xhr.setRequestHeader("X-File-Name", file.name); //  you have file.name here
xhr.setRequestHeader("X-File-id", md5(filename+file.size));

xhr.upload.onprogress = function(evt) {
    console.log(file.name); // so its available here because of closures
    var percent = evt.loaded/evt.total*100;
    var $target = $(evt.target);
    console.log('ok');
    console.log($target);
    console.log('Upload progress: ' + percent + '%');
}

xhr.send(file);

在这个简单的示例中，因为您在file.name回调中使用onprogress，所以javascript知道使用回调获取值并使其可用。

如何获取附加到AJAX请求的事件的元信息？

1 个答案: