Загрузка файлов с помощью 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 и передать ему хеш с настройками.
Делается это следующим образом (код из файла 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 комментариев
Вставка изображения
Оставить комментарий