JavaScript код

Как и в любом другом приложении, использующем JS, код должен быть помещен в шапку (head), документа. Еще одно важное замечание: перед написанием данного JS кода, не забудьте заранее подключить библиотеку jQuery и плагин ajax_upload. Если вы уже это сделали, отлично, приступим к написанию кода:

$(function(){var btnUpload=$('#upload');var status=$('#status');new AjaxUpload(btnUpload, {action: 'upload-file.php',//Имя файлового поля вводаname: 'uploadfile',onSubmit: function(file, ext){if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){// Валидация расширений файловstatus.text(Только JPG, PNG, GIF файлы');return false; }status.text('Uploading...');},onComplete: function(file, response){//Очищаем текст статусаstatus.text('');//Добавляем загруженные файлы в листif(response==="success"){$('<li></li>').appendTo('#files').html('<img src="./uploads/'+file+'" alt="" /><br />'+file).addClass('success');} else{$('<li></li>').appendTo('#files').text(file).addClass('error');}}});});

Сначала, мы инициализируем доступ к кнопке подтверждения загрузки, и записываем в переменную btnUpload. Заодно и получаем доступ к блоку серверных сообщений (status). Далее идет работа с плагином ajaxupload. Создаем новый объект и указываем нужные нам параметры:

Action – путь к нашему серверному обработчику загруженных файлов.

Name – это имя поля ввода, с которого мы будем получать загружаемый на сервер файл.

onSubmit – Функции, которые выполняются перед ajax загрузкой файлов на сервер. В нашем случае, это валидация загружаемых файлов (проверка поддерживаемых расширений). Но опять, проверка, как говорится для «недалеких», эту проверку легко обойти, поэтому стоит еще раз проверять на серверной стороне приложения.

status.text – текст, который выводится в процессе ajax загрузки файлов на сервер. Заметьте, если файлы не поддерживаемые, то выводится сообщение об ошибке.

onComplete – Запускаем функцию по завершению загрузки файла на сервер. В этой функции: очищаем значение status.text; добавляем загруженные файлы в лист files.

Как видите загрузить файлы на сервер с помощью AJAX, проще, чем казалось. Но все-таки, меня смущает наличие библиотеки jQuery в данном методе. И если вы знаете, как реализовать ajax загрузку файлов без использования jQuery, убедительная просьба сообщить в комментариях к статье.

Далее мы рассмотрим более развитый метод ajax загрузки файлов, который позволяет загружать несколько файлов одновременно.