Блог

Я хочу, чтобы 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, к которому прикреплено это событие, например, какой файл я отправляю, чтобы я мог обновить индикатор выполнения, соответствующий этому файлу?

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