Загрузка файла через Ajax с прогресс-баром

HTML

HTML-код для формы загрузки файла:

<form id="form">
    <input type="file" name="userfile" id="userfile">
    <input type="submit" value="Загрузить">
</form>

<!-- Количество загруженных байт -->
<p id="uploaded"></p>

<!-- Прогресс-бар -->
<p><progress max="100" value="0" id="progress"></progress></p>

<!-- Результат загрузки файла -->
<p id="result"></p>

Атрибут enctype="multipart/form-data" не обязательно использовать для загрузки файла через Ajax.

Поле с именем MAX_FILE_SIZE не работает через Ajax (используется, чтобы предупредить о превышении размера файла, не дожидаясь, пока сам файл загрузится).

JavaScript

За передачу состояния о загрузке файла отвечает событие onprogress, появившийся в HTML 5.

var progress    = document.getElementById("progress"),
    uploaded    = document.getElementById("uploaded"),
    result      = document.getElementById("result"),
    maxFileSize = 30000;

document.getElementById("form").onsubmit = function(e) {
    e.preventDefault();
    var input = this.elements.userfile;
    var file = input.files[0];
    
    // проверка на размер файла
    if (file.size >= maxFileSize) {
        result.innerHTML = 'Слишком большой размер файла';
        return false;
    }
    
    if (file) {
        upload(file);
    }
}


function upload(file) {
    var ajax = new XMLHttpRequest();
    ajax.upload.onprogress = function(event) {
        uploaded.innerHTML = 'Загружено ' + event.loaded + ' из ' + event.total;
        progress.setAttribute('max', event.total);
        progress.value = event.loaded;
    }

    ajax.onload = ajax.onerror = function() {
        if (this.status == 200) {
            result.innerHTML = 'Файл успешно загружен';
        } else {
            result.innerHTML = 'Не удалось загрузить файл';
        }
    }

    var formData = new FormData();
    formData.append("userfile", file);
    
    ajax.open("POST", "upload.php", true);
    ajax.send(formData);
}

Сервер получает данные как обычный файл, переданный через форму. Загрузить полученный файл в PHP можно через следующий код:

move_uploaded_file($_FILES['userfile']['tmp_name'], 'path/new-file.jpg');

Пример загрузки файла на JavaScript без использования библиотек (файл на сервер не загружается).