Загрузка файлов с помощью SWFUpload и PHP

Вебмастерское

индексная
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 
<head>
    <title>SWFUpload</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <h1>SWFUpload</h1>
    <div id="uploadButton"></div>
    <div id="status"></div>
    <div id="images"></div>
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/swfupload.js"></script>
    <script type="text/javascript" src="js/plugins/swfupload.queue.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
</body>
</html>

uploadButton – предназначен для размещения кнопки загрузчика.
status – здесь мы будем выводить сообщения о процессе загрузки.
images – в этом блоке будут показаны загруженные картинки.

В конце страницы подключены 4 js файла.
  • Первый – библиотека jquery (ее использовать необязательно).
  • Второй – swfupload.js. Это основной скрипт библиотеки SWFUpload. Именно он создает кнопку загрузки.
  • Третий – plugins/swfupload.queue.js. Тоже входит в состав библиотеки. Позволяет загружать несколько файлов одновременно.
  • Четвертый – main.js. Здесь находится код настройки библиотеки и обработчики событий. Его мы сейчас и рассмотрим.
Настраиваем SWFUpload
Для того, чтобы подключить библиотеку, нужно создать объект SWFUpload и передать ему хеш с настройками.
Делается это следующим образом (код из файла main.js).
var swfu = new SWFUpload(
    {
        upload_url : "upload.php",
        flash_url : "swfupload.swf",
        button_placeholder_id : "uploadButton",
       
        file_size_limit : "2 MB",
        file_types : "*.jpg; *.png; *.jpeg; *.gif",
        file_types_description : "Images",
        file_upload_limit : "0",
        debug: false,
 
        button_image_url: "button.png",
        button_width : 100,
        button_height : 30,
        button_text_left_padding: 15,
        button_text_top_padding: 2,
        button_text : "<span class=\"uploadBtn\">Обзор…</span>",
        button_text_style : ".uploadBtn { font-size: 18px; font-family: Arial; background-color: #FF0000; }",
       
        file_dialog_complete_handler : fileDialogComplete,
        upload_success_handler : uploadSuccess,
        upload_complete_handler : uploadComplete,
        upload_start_handler : uploadStart,
        upload_progress_handler : uploadProgress
    }
);

В параметре upload_url мы указываем адрес php скрипта, который принимает файлы.

С помощью параметров flash_url и button_placeholder_id указываем адрес флеш ролика, который создаёт кнопку загрузки и id элемента на странице, в котором эта кнопка будет размещена.

Затем идет несколько параметров, устанавливающих ограничения на загрузку файлов. Здесь указаны допустимые разрешения файлов, их максимальный размер и количество файлов, которые можно загрузить за один раз (0 – любое количество).

После этого указываем параметры, настраивающие внешний вид кнопки загрузки. Эта часть обязательная, т.к. по-умолчанию кнопка имеет размер 1х1 пиксель, и пользоваться ей будет невозможно.

Т.к. кнопка представляет собой флеш ролик, оформить её напрямую с помощью CSS не получится, но с помощью этих параметров вы можете указать фоновую картинку, шрифт и положения текста.

Оставшиеся параметры устанавливают обработчики событий. Рассмотрим их подробнее.
function uploadSuccess(file, serverData) {
    $('#images').append($(serverData));
}
 
function uploadComplete(file) {
    $('#status').append($('<p>Загрузка ' + file.name + ' завершена</p>'));
}
 
function uploadStart(file) {
    $('#status').append($('<p>Начата загрузка файла ' + file.name + '</p>'));
    return true;
}
 
function uploadProgress(file, bytesLoaded, bytesTotal) {
    $('#status').append($('<p>Загружено ' + Math.round(bytesLoaded/bytesTotal*100) + '% файла ' + file.name + '</p>'));
}
 
function fileDialogComplete(numFilesSelected, numFilesQueued) {
    $('#status').html($('<p>Выбрано ' + numFilesSelected + ' файл(ов), начинаем загрузку</p>'));
    this.startUpload();
}

upload.php
<?php
 
$uploadDir = 'uploads/'; //папка для хранения файлов
 
$allowedExt = array('jpg', 'jpeg', 'png', 'gif');
$maxFileSize = 2 * 1024 * 1024; //1 MB
 
//если получен файл
if (isset($_FILES)) {
    //проверяем размер и тип файла
    $ext = end(explode('.', strtolower($_FILES['Filedata']['name'])));
    if (!in_array($ext, $allowedExt)) {
        return;
    }
    if ($maxFileSize < $_FILES['Filedata']['size']) {
        return;
    }
    if (is_uploaded_file($_FILES['Filedata']['tmp_name'])) {
        $fileName = $uploadDir.$_FILES['Filedata']['name'];
        //если файл с таким именем уже существует…
        if (file_exists($fileName)) {
            //…добавляем текущее время к имени файла
            $nameParts = explode('.', $_FILES['Filedata']['name']);
            $nameParts[count($nameParts)-2] .= time();
            $fileName = $uploadDir.implode('.', $nameParts);
        }
        move_uploaded_file($_FILES['Filedata']['tmp_name'], $fileName);
        echo '<img src="'.$fileName.'" alt="'.$fileName.'" />';
    }
}

0 комментариев

Оставить комментарий