Как получить метаинформацию для события, прикрепленного к запросу AJAX?

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 знает, как получить значение с обратным вызовом и делает его доступным.