июня
25
1

SWFUpload – пример загрузки файлов

Author admin    Category CakePHP, jQuery, PHP     Tags ,

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

В итоге всё оказалось достаточно просто и, главное, эффективно. Немного помучавшись с путями к файлам и папкам, всё же сделал готовый к работе пример загрузки файлов на CakePHP с использованием SWFUpload.

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

Расположение файлов

Итак, создаём в директории webroot/js папку swfupload. В ней помещаются файлы:

  • swfupload.js (главный файл скрипта)
  • swfupload.swf (загрузчик-флешка)
  • button.png (картинка с кнопкой загрузки)
  • swfupload.main.js (наши функции с действиями при загрузке, а также с настройками)
  • swfupload.queue.js (для мультизагрузки)
  • upload.php (php-часть загрузки файла)

Файл button.png может выглядеть как угодно, например вот так:

Подключение файлов

В нужном нам layout‘е (который используется для текущей страницы загрузки файла) подключаем файлы в разделе HEAD.

1
2
3
4
echo $javascript->link('jquery/jquery-1.4.2.min');
echo $javascript->link('swfupload/swfupload');
echo $javascript->link('swfupload/swfupload.queue');
echo $javascript->link('swfupload/swfupload.main');

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

Тут всё, конечно, идёт на ваше усмотрение. Но в базовом виде это можно сделать так.

1
2
3
4
5
6
<form method="post">
    <div id="uploadButton"></div>
    <div id="images"></div>
    <div id="status"></div>    
    <input name="data[Post][user_id]" value="<?=$user['User']['id']?>" id="PostUserId" type="hidden">
</form>

Здесь:

  • “uploadButton” – сюда помещается картинка загрузчика
  • “images” – сюда можно поместить в каком-то виде процесс выполнения загрузки
  • “status” – результат загрузки
  • “PostUserId” – передаваемый параметр (в данном случае ID юзера)

Полей может быть и больше, всё на ваш выбор. Можно сделать всего лишь кнопку и результат выполнения.

Настройки загрузки

Посмотрим содержимое файла swfupload.main.js.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
$(document).ready(function() {

    function uploadSuccess(file, serverData) {
        $("#images").append($('#status').html());
    $('#status').html("Загрузка завершена");
    }
   
   function uploadComplete(file) {
       
    }
   
    function uploadStart(file) {
        this.addPostParam("user", document.getElementById("PostUserId").value);
        $('#status').append($('<p><div class="progress"><div class="progress-text">0%</div><div class="progress-load" style="width: 0px;"></div></div></p>'));
        return true;
    }
   
    function uploadProgress(file, bytesLoaded, bytesTotal) {
        $('#status .progress-text').text(Math.round(bytesLoaded/bytesTotal*100) + '%');
        $('#status .progress-load').css('width',Math.round(bytesLoaded/bytesTotal*100)*9.28 + 'px');
    }

    function fileDialogComplete(numFilesSelected, numFilesQueued) {
    if (numFilesQueued > 0) {
        this.startUpload();            
    }
    }
   
    var swfu = new SWFUpload(
        {
            upload_url : "/js/swfupload/upload.php",    // PHP-файл загрузки
            flash_url : "/js/swfupload/swfupload.swf",  // флешка загрузки
            button_placeholder_id : "uploadButton",    // ID кнопки-загрузчика
           
            file_size_limit : "10 MB",                         // максимальный размер файлов
            file_types : "*.jpg; *.png; *.jpeg; *.gif",  // допустимые расширения
            file_types_description : "Images",            // как обозначить типы файлов в диалоге загрузки
            file_upload_limit : "0",                            // лимит файлов для загрузки (0 - неограниченно)
            debug: false,

            button_image_url: "/js/swfupload/button.png",     // расположение изображения кнопки
            button_width : 140,                                        // высота кнопки
            button_height : 28,                                         // ширина
        button_cursor : SWFUpload.CURSOR.HAND,         // вид курсора
           
            file_dialog_complete_handler : fileDialogComplete,   // назначаем имена рабочих функций
            upload_success_handler : uploadSuccess,
            upload_complete_handler : uploadComplete,
            upload_start_handler : uploadStart,
            upload_progress_handler : uploadProgress,
        queue_complete_handler : queueComplete 
        }
    );
});

Настройки загрузки файлов SWFUpload находятся в переменной swfu.

Процесс загрузки файла

1. По нажатию на кнопку загрузки открывается стандартный диалог загрузки файлов. Выбираем файлы.
2. После этого в fileDialogComplete проверяем, выбраны ли файлы. Если да, то передаём управление uploadStart.
3. В uploadStart методом POST передаём в файл upload.php переменную user (ID юзера).
4. Процесс загрузки файла можно отобразить в функции uploadProgress.
В созданном в предыдущем шаге програссбаре (div class=”progress”) показываем процент выполнения задания на основе возвращаемых параметров bytesLoaded и bytesTotal (загруженных байтов и всего байтов).
5. На заключительном этапе работают функции uploadComplete и uploadSuccess, в которых можно написать о результате выполнения загрузки.

Файл import.php

После загрузки файла во временную директорию, за дело берётся upload.php.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
        $dir = $_POST['user'];
    $uploadDir = $_SERVER['DOCUMENT_ROOT'].'/app/webroot/img/photo/'.$dir.'/';      // абсолютный путь, папка для хранения файлов
    $viewDir = '/app/webroot/img/photo/'.$dir.'/';                                                  // папка для хранения файлов
   
        // если ещё не создана папка для файлов, создаем её и выставляем права
    if (!is_dir($uploadDir)) {mkdir($uploadDir);}
    chmod($uploadDir, 0777);
       
        // допустимые расширения и размер
    $allowedExt = array('jpg', 'jpeg', 'png', 'gif');
    $maxFileSize = 10 * 1024 * 1024;                 //10 MB
   
    //если получен файл
    if (isset($_FILES)) {
        //проверяем размер и тип файла
        $name = $_FILES['Filedata']['name'];
        $ext = end(explode('.', strtolower($name)));

        if (!in_array($ext, $allowedExt)) { return;  }
        if ($maxFileSize < $_FILES['Filedata']['size']) {  return;  }
       
        // новое имя для файла (если нужно)
        srand();
            $name = microtime($get_as_float = true);
        $name = str_replace(',','',$name);
        $name = $name.mt_rand(0,999999).'.'.$ext;
       
            // если есть файл      
        if (is_uploaded_file($_FILES['Filedata']['tmp_name'])) {
            // полный путь к файлу
                $fileName = $uploadDir.$name;
       
                //если файл с таким именем уже существует...
            if (file_exists($fileName)) {
                //...добавляем текущее время к имени файла
                $nameParts = explode('.', $name);
                $nameParts[count($nameParts)-2] .= time();
                $fileName = $uploadDir.implode('.', $nameParts);
            }
                // перемещаем файл из временной папки в нужную
            move_uploaded_file($_FILES['Filedata']['tmp_name'], $fileName);
            $fileName = $name;
            echo $fileName;
        }
    }

Вот и всё. Выводимое в конце имя файла можно, например, показать в uploadSuccess следующим образом

1
$('#status').html(serverData)

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

Вот так вкратце выглядит пример загрузки файлов с использованием SWFUpload. Надеюсь, что всё описал достаточно понятно. А если нет – спрашивайте, поправлю и дополню.

Похожие статьи:

Комментарии

  • zed221 8 августа 2011 в 03:37

    люди у меня вопрос есть скрипт отправки анонимных писем вапрос а можна ли прикрепить swfupload к скрипту анонимных отправок писем если можна то напишите как можна в асю 609-603-736

    Ответить

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

Перед отправкой формы:
Human test by Not Captcha