В предыдущей статье "AJAX загрузка файлов" рассказывал как можно сделать загрузку файла через JQuery / AJAX. Но файлы бывают довольно большие, а интернет соединение медленным. Поэтому хорошо бы отображать процент загрузки файла на сервер. Иначе пользователь может подумать, что форма зависла и не отвечает.
Сразу покажу код. Он имеет минимальные отличия от приведённого в предыдущей статье. HTML часть:
<form action="" method="post">
<input name="FILE" type="file">
</form>
<div class="js_progress"></div>
В div с классом js_progress будет отображаться процент загрузки файла. В сравнении с прошлой формой убрал поля AGE и NAME. Кнопку отправки формы "submit" можно добавить самостоятельно. А можно сделать вообще без кнопки отправки, а поставить функцию на события onchange у input, тогда загрузка начнётся сразу после выбора файла.
Как и в прошлом примере, для загрузки файлов из формы на сервер через ajax используется объект FormData. В отличии от старого примера, в этот раз у функции ajax будут заданы параметры fail, xhr, beforeSend. Скрипты:
var fdata = new FormData();
fdata.append('FILE', $('input[name=FILE]')[0].files[0]);
$.ajax({url: "/ajax.php",
type: "POST",
data: fdata,
success: function(data){// получение ответа от скрипта-обработчика
$('.js_progress').html('Файл успешно загружен');},
fail: function(data){$('.js_progress').html('Ошибка загрузки');
},
beforeSend: function() {$('.js_progress').html('Загрузка - 0%');
},
xhr: function() {var myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){myXhr.upload.addEventListener('progress', FileUploadProgress, false);
}
return myXhr;},
processData: false,
contentType: false});
function FileUploadProgress(e){
if(e.lengthComputable){
var p = (e.loaded * 100)/e.total;
p = parseInt(p);
$('.js_progress').html( 'Загрузка - ' + p + '%');
if(p >= 100) $('.js_progress').html('Файл успешно загружен');}
return true;}
Перед началом загрузки файла в блоке прогресса появится надпись "Загрузка - 0%". Затем там будет указан статус загрузки в виде надписи с процентом: "Загрузка - 75%".
Если во время загрузки произойдёт оишбка, то в блоке с классом js_progress появится сообщение "Ошибка загрузки". И если файл загружен на 100% (форма отправлена), то в js_progress появится сообщение "Файл успешно загружен".
P.S.
Я не профи-программист. Поэтому часто забываю, что функции обязательно должны что-то возвращать. Всегда должен быть return. Если возвращать нечего, то можно поставить
return true;
- не забывайте это как я. Делать всё по правилам - признак хорошего тона.
Для понимания этой статьи необходимо минимальное наличие знаний по программированию. Потому что, если скопировать и вставить этот код в проект, то ничего не будет работать "из коробки".
Чтобы всё заработало, необходимо сделать кнопку submit, потом задать форме функцию через onsubmit. Это функция будет выполняться при отправке формы. Потом надо обернуть всю часть кода с AJAX в функцию (но вынести FileUploadProgress за её пределы). И поставить эту функцию в onsubmit формы.
Если нужно, то могу доработать до полностью рабочей заготовки. Но рассчитываю, что эту статью будут читать программисты, поэтому дотошно не объясняю и пропускаю куски кода.
Вся статья - это только демонстрация принципа. Каждый может доработать код под свой сайт. Поэтому он не обременён излишествами 🙂
Зачем там кнопка отправить? Вызываете екшен аяксом по выбору файла.
Делов то)
Спасибо большое круто! Давно искал.