Как создать загрузчик файлов в стиле Ajax

загрузчик файлов

От автора: в этом учебнике при помощи jQuery, Ajax и Php мы создадим простой загрузчик файлов в стиле Ajax. Тот, который вы легко сможете осуществить на своем сайте, дополненный серверной валидацией и валидацией на стороне клиента.

Вступление

Приложение, которое сделаем, будет употреблять гибкость jQuery для того, чтобы можно было выгружать множественные файлы без обновления страницы или переадресации, с полной серверной и клиентской валидацией для предотвращения выгрузки на ваш сервер нежелательных файлов. Каждая секция будет разделена на описания того, что и зачем она выполняет, чтобы вам было проще все понять.

загрузчик файлов ajax

скачать исходники

пример загрузчика файлов ajax

Шаг 1: разметка HTML

Начните с создания документа html и определения формы, которая будет использоваться для загрузчика файлов. Сохраните его как index.html.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<title>Ajax Uploader</title>  
<link rel="stylesheet" href="style.css" type="text/css" media="screen" title="Main" />  
<script type=''text/javascript'' src="path/to/jquery.js"></script>  
<script type="text/javascript" src="path/to/ajax/ajaxupload.3.5.js"></script>  
<script type="text/javascript">  
$(document).ready(function() {  
 // выполнять, когда готов DOM  
});  
</script>  
</head>  
  
<body>  
<div id="file_holder">  
<form action="upload.php" method="post" enctype="multipart/form-data">  
	  
<p><label for="userfile">Choose file(s) to upload:</label>  
<input id="userfile" class="input" type="file" name="userfile" /></p>  
<div id="loading"><img src="ajax-loader.gif" alt="Loading"/> Loading, please wait...</div>  
<div id="errormes"></div>  
	  
<noscript>  
<input type="submit" value="submit" class="button2" />  
</noscript>  
</form>  
</div>  
</body>  
</html>  

Начинаем свой документ html с добавления обычных doctype, html, тэгов head и body. В head добавляем заголовок, ссылку на таблицу стилей, ссылку на Google jQuery CDN и свой плагин Ajax. Второй тэг script находится там, куда мы будем помещать весь код после того, как документ будет готов.

Внутри body делаем разметку своей страницы при помощи div‘а #file_holder, который станет нашим упаковщиком, формой и нескриптовой кнопкой submit (отправить), которая поможет сохранить юзабилити (простоту и доступность использования), если у пользователя в браузере не включен javascript, ввод загрузчика файлов и два div’а, которые будут содержать изображение загрузки, а также сообщения об ошибках.

Браузер с отключенным javascript

Если у нашего пользователя не активирован javascript, операция form позаботится о передаче файла к upload.php, пользователь будет просто переадресован к ней вместо того, чтобы оставаться на той же странице, и появится сообщение об успешном выполнении или ошибке.

Зависимые файлы

Для изображения загрузки я применил «указатели-стрелки» (arrows) из http://www.ajaxload.info/.
Выберите то изображение, которое вам нравится, сохраните его как ajax-loader.gif и выгрузите на свой сервер.

Нам также понадобится плагин Ajax upload. Сохраните его как ajaxupload.js и выгрузите на сервер в папку с названием "ajax".

Шаг 2: стили CSS

Для функциональности этой простой формы требуется всего три строки стилей, скрытие div’а loading на странице загрузки, и расцвечивание текста сообщений об успешном выполнении и ошибке. Конечно, вы можете все улучшить и сделать красивее, чем в моем простом примере загрузчика. Сохраните как style.css.

/*Документ CSS*/  
#loading {display:none;}  
.error {color:#900000;}  
.success {color:#009900;}  

Шаг 3: Javascript

Теперь можно приняться за создание функций jQuery, которые заставляют наш загрузчик работать. Нам будет проще разметить, как все работает в целом, разделив секции на действия.

var upload = new AjaxUpload('#userfile', {  
       //выгружаем скрипт  
       action: 'upload.php',  

Мы начинаем назначение переменных своего загрузчика Ajax, во-первых, с установки ввода #userfile как переменной загрузки, а затем назначаем действие, с которого начинает действовать ввод, когда выбирается файл.

onSubmit : function(file, extension){  
        //показываем анимацию загрузки  
        $("#loading").show();  
        //проверяем расширение файла  
        if (! (extension && /^(jpg|png|jpeg|gif)$/.test(extension))){  
       // если расширение не разрешено  
             $("#loading").hide();  
             $("<span class="error">Ошибка: Невеный формат файла</span>").appendTo("#file_holder 
 #errormes");  
            // отменяем выгрузку  
       return false;  
            } else {  
              // убираем сообщение об ошибке  
            $('.error').hide();  
            }  
            //посылаем данные  
            upload.setData({'file': file});  
        },  

Вышеприведенный фрагмент говорит загрузчику что делать, как только файл выбран из нашего файлового ввода. Во-первых, показывается анимация загрузки, пока проверяется расширение файла. Если расширение файла не совпадает с предопределенными, выгрузка останавливается и пользователю показывается сообщение об ошибке. Как только пользователь предпринимает новую попытку с правильным расширением файла, сообщение об ошибке убирается, и данные файла предаются в файл upload.php при помощи команды setData.

onComplete : function(file, response){  
        //скрываем анимацию загрузки  
        $("#loading").hide();  
        //добавляем display:block в держатель сообщения о выполнении  
        $(".success").css("display", "block");  
//находим div в iFrame и прикрепляем к сообщению об ошибке  
        var oBody = $(".iframe").contents().find("div");  
        //добавляем iFrame к errormes  
        $(oBody).appendTo("#file_holder #errormes");  
}  

Как только наш файл передается в upload.php, до которого мы скоро доберемся, изображение загрузки скрывается и, при помощи захвата статуса из iframe, создаваемого плагином ajaxupload, показывается сообщение об успешном выполнении или ошибке.

Скрипт целиком

Скопируйте и вставьте весь этот код в раздел head своего документа.


<script type="text/javascript">  
$(document).ready(function() {  
var upload = new AjaxUpload('#userfile', {  
        //выгружаем скрипт  
        //action: 'upload.php', //выгружает отключенное в целях безопасности  
        action: 'upload.htm',  
        onSubmit : function(file, extension){  
        //показываем анимацию загрузки  
        $("#loading").show();  
        //проверяем расширение файла  
        if (! (extension && /^(jpg|png|jpeg|gif)$/.test(extension))){  
       // расширение не разрешено  
             $("#loading").hide();  
             $("<span class="error">Error: Not a valid file extension</span>").appendTo("#file_holder #errormes");  
            // отменяем выгрузку  
       return false;  
            } else {  
              // избавляемся от сообщения об ошибке  
            $('.error').hide();  
            }  
            //высылаем данные  
            upload.setData({'file': file});  
        },  
        onComplete : function(file, response){  
        //скрываем анимацию загрузки  
        $("#loading").hide();  
        //добавляем display:block в держатель сообщения о выполнении  
        $(".success").css("display", "block");  
  
        //находим div в iFrame и прикрепляем к сообщению об ошибке  
        var oBody = $(".iframe").contents().find("div");  
        //добавляем iFrame к errormes td  
        $(oBody).appendTo("#file_holder #errormes");  
}  
    });  
});  
        </script>  

Шаг 4: PHP

Файл php делает действительную выгрузку на наш сервер в то время, как функции, которые мы приведем в исполнение, обеспечивают валидацию, чтобы убедиться, что выгруженный файл остается в пределах установленных нами правил. Объяснить все проще поможет разбиение этого файла на секции.

$max_filesize = 2097152; // максимальный размер файла в БАЙТАХ.  
$allowed_filetypes = array('.jpg','.jpeg','.gif','.png'); // Это будут виды файлов, которые пройдут проверку (валидацию).  
$filename = $_FILES['userfile']['name']; // получаем название файла (включая его расширение).  
$ext = substr($filename, strpos($filename,'.'), strlen($filename)-1); // Получаем расширение из названия файла.  
$file_strip = str_replace(" ","_",$filename); //Замещаем пробелы в названии файла  
$upload_path = '/path/to/uploads/'; //устанавливаем путь выгрузки 

Хотя многое тут и так понятно, я поясню, что выполняет все вышеприведенное.

Переменная $max_filesize определяет максимальный размер разрешенного для выгрузки файла, в данный момент она установлена на 2mb (так по умолчанию выставляют свои серверы большинство хостинг-провайдеров), определенные в байтах.

Переменная $filename получает из ввода #userfile название файла целиком, включая расширение.
Переменная $ext проверяет правильность расширения на соответствие массиву $allowed_filetypes.

Переменная $allowed_filetypes выстраивает и располагает в определенном порядке виды файлов для ссылки, когда запускается проверка в нижней части кода, до которого мы вскоре доберемся.

$file_strip замещает любые пробелы в названии файла подчеркиваниями, зачем? Если имя файла используется в url, таком как ссылка на изображение и т.д., пробелы часто замещаются на 20% созданием адреса sloppy и его сложно индексировать поисковикам.

Наконец, $upload_path определяет папку, в которую будут перемещаться выгрузки, соответствующую домашней на вашем сервере. Другими словами, большинство серверов конфигурируются файловой структурой вроде этой:/home/yourusername/yoursite.com/path/to/uploads/. Убедитесь, что используете полный путь с начальными и конечными метками "/".

Находим корневой каталог сервера

Чтобы легко найти путь, который нужно здесь ввести, попробуйте выгрузить на сервер нижеприведенный скрипт php, назвать его root.php и получить к нему доступ из своего браузера. Убедитесь, что после того, как нашли корневой каталог своего сервера, вы удалили файл, чтобы не выставлять его напоказ.

<?php $server = $_SERVER['DOCUMENT_ROOT']; ?>  
<?php echo $server; ?>  

Остальная часть скрипта просто обрабатывает функции, основанные на установленных нами в вышеприведенном коде параметрах.

// Проверяем, разрешен ли тип файла, если не DIE, и информируем пользователя.  
 if(!in_array($ext,$allowed_filetypes)) {  
  die('<div class="error">Загружаемый тип файла недостим.</div>');  
}  

Вначале проверяется массив видов файлов, и если данного расширения в нем нет, скрипт останавливает выполнение (die) и выводит сообщение об ошибке.

// Теперь проверяем размер файла, если он слишком большой, то DIE и информируем пользователя.  
  if(filesize($_FILES['userfile']['tmp_name']) > $max_filesize) {  
     die('<div class="error">Загружаемы файл слишком большой.</div>');  
}  

Проверьте размер файла на соответствие установленной переменной, если он больше, скрипт останавливает выполнение (die) и выводит сообщение об ошибке.

// Проверяем, можно ли выгрузить в определенный путь, если нет, то DIE и информируем пользователя.  
 if(!is_writable($upload_path)) {  
    die('<div class="error">Вы не можете загружать в папку /uploads/. Измените права на папку.</div>');  

Эта часть кода проверяет папку на сервере, чтобы убедиться, что она перезаписываемая, или пригодна для размещения в ней файла нашим скриптом. Если нет, снова применяем (die) и выводим сообщение пользователю.

// Перемещаем файл, если все прошло проверку.  
  if(move_uploaded_file($_FILES['userfile']['tmp_name'],$upload_path . $file_strip)) {  
     echo '<div class="success">'. $file_strip .' Файл успешно загружен.</div>'; // Получилось.  
 } else {  
     echo '<div class="error">'. $file_strip .' Файл не загружен. Попробуйте позже.</div>>'; // Не получилось :( .  
 }  

Если файл прошел все проверки на стороне сервера, то он перемещается в папку загрузок. Если что-то еще пошло не так, наш пользователь извещается о том, что следует предпринять новую попытку.

upload.php

Скопируйте и вставьте весь этот код в новый файл и сохраните его как upload.php

<?php  
  
   $max_filesize = 2097152; // Максимальный размер файла в БАЙТАХ.  
     $allowed_filetypes = array('.jpg','.jpeg','.gif','.png'); // Это будут виды файлов, которые пройдут валидацию.  
     $filename = $_FILES['userfile']['name']; // Получаем название файла (включая его расширение).  
         $ext = substr($filename, strpos($filename,'.'), strlen($filename)-1); // Получаем расширение имени файла.  
     $file_strip = str_replace(" ","_",$filename); //Замещаем пробелы в названии файла  
     $upload_path = '/path/to/uploads/'; //Устанавливаем путь выгрузки  
  
     // Проверяем, разрешен ли вид файла, если нет - DIE и информируем пользователя.  
    if(!in_array($ext,$allowed_filetypes)) {  
            die('<div class="error"> Загружаемый тип файла недостим.</div>');  
    }  
   // Теперь проверяем размер файла, если он слишком большой, то DIE и информируем пользователя.  
   if(filesize($_FILES['userfile']['tmp_name']) > $max_filesize) {  
      die('<div class="error"> Загружаемы файл слишком большой.</div>');  
    }  
   // Проверяем, можно ли выгрузить в определенный путь, если нет, то DIE и информируем пользователя.  
   if(!is_writable($upload_path)) {  
      die('<div class="error"> Вы не можете загружать в папку /uploads/. Измените права на папку.</div>');  
	    }  
     // Перемещаем файл, если он прошел все проверки.  
     if(move_uploaded_file($_FILES['userfile']['tmp_name'],$upload_path . $file_strip)) {  
      echo '<div class="success">'. $file_strip .' Файл успешно загружен. </div>>'; // Получилось.  
    } else {  
      echo '<div class="error">'. $file_strip . Файл не загружен. Попробуйте позже.</div>'; // Не получилось :( .  
 }  
?>  

Устанавливаем права доступа к файлам

Перед тем, как протестировать свой загрузчик, нужно убедиться, что папка, куда пойдут наши выгрузки, перезаписываемая. Я обойдусь без обычных вещей типа CHMOD на 777 и пойду дальше. Если вы знакомы с использованием клиента Telnet, эта часть – не для вас, она для тех, кто был совсем как я, когда начинал, жаждущим прочесть и выучить CHMOD и тут же подумавшим «Что за фигня?»

В сущности, откройте свой ftp-клиент и пройдите в папку, куда перемещаются загрузки из этого загрузчика. Щелкните правой кнопкой мыши по папке и выберите свойства (properties), убедитесь, что все окна установлены на read, write и execute, (777) нажмите OK и закройте окно.

Пройдите в Dreamweaver к папке с выгрузками во время дистанционного управления и щелкните правой кнопкой мыши по файлу, выберите «Установить права доступа» (Set permissions) и далее следуйте вышеприведенным инструкциям.

Изменение прав доступа к файлам на сервере

Шаг 5: попробуйте

Последний шаг – попробовать и посмотреть, работает он или нет. Если ничего не происходит или что-то ломается, вернитесь обратно, пройдите по тщательно расписанным мною шагам и определите, что не так. Не бойтесь скачать исходные файлы и проверить демо-версию, чтобы лучше понять, как работает загрузчик.

Спасибо за прочтение!

Автор: VagrantRadio

Источник: www.vagrantradio.com

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Создание зависимых списков средствами AJAX

Прямо сейчас посмотрите курс по созданию зависимых списков средствами AJAX!

Смотреть курс

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (12)

  1. Иван

    Спасибо. Хорошая статья получилась!

  2. Pocherk

    Спасибо! В хозяйстве пригодится :)

  3. Николай

    Спасибо! Очень полезная информация!

  4. Юрий

    Спасибо, а то никак не доберусь, чтобы нормально разобраться со всем этим

  5. Debaf

    Хорошие у вас, обучающие статьи, очень помогли спасибо человеческое!!!

  6. Александр

    Хорошие у вас, обучающие статьи, очень помогли спасибо

  7. Сергей

    Спасибо за интересные уроки.

  8. Андрей

    Подскажите пожалуйста.
    Как сделать, чтобы загрузка файла начиналась только после нажатия самой кнопки на форме(type=»submit») а не сразу полсе выбора файла.

    Поясню:
    Есть поле выбора файла
    Есть другие текстовые поля, обязательные для заполнения
    Есть кнопка «Загрузить».

    Требуется чтобы загрузка файла и загрузка всего скрипта начиналась только после нажатия на кнопку «загрузить»
    (как с вариантом при отключенном java в браузере)

    Понимаю что надо копать в файле js.

  9. SIS

    Jquery для слабаков!

  10. Юлия

    Добрый день скажите пожалуйста а есть ли видео урок как сделать домашний файлообменник ?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree