Пишем свой Uploader с нуля на javascript используя FileApi. Часть2

Вот и созрело продолжение первой части, где мы разобрались как можно использовать родной объект FileReader для чтения файла.

Давайте еще добавим прогресс чтения файла для нашего загрузчика. Для этого зададим callback метод для FileReader:

reader.onprogress = updateProgress;

Рассмотрим что из себя представляет метод updateProgress:

function updateProgress(event) {
    if (event.lengthComputable) {
        var progress = Math.round((event.loaded / event.total) * 100);
        document.getElementById('buffer').innerHTML = progress + '%';
    }
}

Все просто. event.lengthComputable нам необходимо чтобы убедится что event – объект того события, которое мы ждем, а именно ProgressEvent.

Math.round((event.loaded / event.total) * 100)

Примитивная математика для вычисления процента.

document.getElementById('buffer').innerHTML = progress + '%';

Тут мы использовали уже имеющийся textarea элемент с id = buffer, чтобы вывести проценты туда.

Вот что в итоге получилось:  http://learn.javascript.ru/play/u0bbrb
Советую использовать большие файлы( от 100МБ) для проверки работоспособности.

!Внимание: мы рассмотрели пока прогресс загрузки файла локально, т.е. непосредственно чтения содержимого файла скриптом, но еще не саму загрузку данных на сервер.