Для загрузки нам нужно точно знать количество загруженных байт. Это может сообщить только сервер.
Алгоритм возобновляемой загрузки
Загрузкой файла будет заведовать объект Uploader, его примерный общий вид:
function Uploader(file, onSuccess, onFail, onProgress) {
// fileId уникальным образом идентифицирует файл
// можно добавить идентификатор сессии посетителя, но он и так будет в заголовках
var fileId = file.name + '-' + file.size + '-' + +file.lastModifiedDate;
// сделать из fileId число (хеш, алгоритм неважен), мы будем передавать его в заголовке,
// в заголовках разрешены только ASCII-символы
fileId = hashCode(fileId);
var errorCount = 0;
// если количество ошибок подряд превысит MAX_ERROR_COUNT, то стоп
var MAX_ERROR_COUNT = 6;
var startByte = 0;
var xhrUpload;
var xhrStatus;
function upload() {
console.log("upload: check status");
xhrStatus = new XMLHttpRequest();
xhrStatus.onload = xhrStatus.onerror = function() {
if (this.status == 200) {
startByte = +this.responseText || 0;
console.log("upload: startByte=" + startByte);
send();
return;
}
// что-то не так
if (errorCount++ < MAX_ERROR_COUNT) {
setTimeout(upload, 1000 * errorCount); // через 1 сек пробуем ещё раз
} else {
onError(this.statusText);
}
};
xhrStatus.open("GET", "status", true);
xhrStatus.setRequestHeader('X-File-Id', fileId);
xhrStatus.send();
}
function send() {
xhrUpload = new XMLHttpRequest();
xhrUpload.onload = xhrUpload.onerror = function() {
console.log("upload end status:" + this.status + " text:" + this.statusText);
if (this.status == 200) {
// успешное завершение загрузки
onSuccess();
return;
}
// что-то не так
if (errorCount++ < MAX_ERROR_COUNT) {
setTimeout(resume, 1000 * errorCount); // через 1,2,4,8,16 сек пробуем ещё раз
} else {
onError(this.statusText);
}
};
xhrUpload.open("POST", "upload", true);
// какой файл догружаем /загружаем
xhrUpload.setRequestHeader('X-File-Id', fileId);
xhrUpload.upload.onprogress = function(e) {
errorCount = 0;
onProgress(startByte + e.loaded, startByte + e.total);
}
// отослать, начиная с байта startByte
xhrUpload.send(file.slice(startByte));
}
function pause() {
xhrStatus && xhrStatus.abort();
xhrUpload && xhrUpload.abort();
}
this.upload = upload;
this.pause = pause;
}
// вспомогательная функция: получение 32-битного числа из строки
function hashCode(str) {
if (str.length == 0) return 0;
var hash = 0,
i, chr, len;
for (i = 0; i < str.length; i++) {
chr = str.charCodeAt(i);
hash = ((hash << 5) - hash) + chr;
hash |= 0; // Convert to 32bit integer
}
return hash;
};
- Аргументы для new Uploader:
file
Объект File API. Может быть получен из формы, либо как результат Drag’n’Drop.
onSuccess, onFail, onProgress
Функции-коллбэки, которые будут вызываться в процессе (onProgress
) и при окончании загрузки.
Подробнее про важные данные, с которыми мы будем работать в процессе загрузки:
fileId
Уникальный идентификатор файла, генерируется по имени, размеру и дате модификации. По нему мы всегда сможем возобновить загрузку, в том числе и после закрытия и открытия браузера.
startByte
С какого байта загружать. Изначально – с нулевого.
errorCount / MAX_ERROR_COUNT
Текущее число ошибок / максимальное число ошибок подряд, после которого загрузка считается проваленной.
Алгоритм загрузки:
- Генерируем fileId из названия, размера, даты модификации файла.
Можно добавить и идентификатор посетителя.
- Спрашиваем сервер, есть ли уже такой файл, и если да – сколько байт
уже загружено?
- Отсылаем файл с позиции, которую сказал сервер. При этом загрузку
можно прервать в любой момент, просто оборвав все запросы.
Вы можете скачать пример и запустить локально для полноценной демонстрации: