Не так давно я открыл для себя достаточно интересный фреймворк, но уже для php — Codeigniter. В принципе, достаточно простой, удобный, мощный и, что очень важно, быстрый фреймворк. Я планирую ещё написание цикла статей по работе с Codeigniter, от самого начала до создание каких-то более-менее вразумительных задач. Лично я создаю на нём свою собственную CMS — noneCMS, да вот такой я скромный (-: Это исключительно для себя будет детище (-:
Так вот… понадобился мне загрузчик файлов на сервер из моей CMS. Ну там фотки всякие, картинки, мало ли что может понадобиться. Смысл был в том, что загрузив изображения, они должны быть потом доступны при создании статей, т.е. в TinyMCE. К слову, в качестве редактора у себя я использую именно TinyMCE. Надо будет тоже написать несколько статей по его установке и настройке — уж больно вкусная шняжка (-: Но сейчас не об этом. Думал что-то найти, замутить, чтоб связать jQuery и CI, чтоб асинхронно передавать файлики на сервер. Однако не нашлось никакого тривиального решения, особенно для мультизагрузки файлов. Перелопатив пол-интернета в поисках приемлемого решения, сначала остановил свой взор на Uploadify. Однако мне так и не удалось его подружить с CI. Больно заковыристо он использует скрипт на сервере, и правка кода исходников тоже не помогла. А может просто руки у меня не из того места растут (-: После нескольких дней безуспешных попыток скрестить Codeigniter и Uploadify, Евгений Самборский подсказал мне наличие другого замечательного решения — SWFUpload. На сайте разработчиков можно посмотреть несколько демок, чтоб понять, что это и с чем это едят. Я же расскажу, как заставить эту сладкую парочку работать друг с другом. Я наивно предполагаю, что Вы уже умеете работать с Codeigniter (-: Если нет, то ждите в скором времени статей для новичков, как работать с этим продуктом (-:
Для остальных же имеем следующее:
1. Установленный и настроенный для работы CI.
2. Скачиваем SWFUpload. Хотя этого будет мало (-: Ну лично у меня не получилось заставить работать этот плагин только скачав его ядро. Поэтому я взял за основу пример на странице разработчиков SWFUpload. Всё, необходимое для работы плагина, я сохранил в папке swfupload в корне рабочей папки Codeigniter. О! Чуть не забыл: в Firefox 3.0.11 у меня не работали демки с сайта SWFUpload. Пришлось обновить его, огненного лиса, до последней версии 3,5. Так вот, в папке swfupload находится следующее:
- папка Flash
- папка plugins
- default.css
- fileprogress.js
- handlers.js
- jquery-1.3.2.js
- swfupload.js
- swfupload.queue.js
- XPButtonUploadText_61x22.png — это кнопка (-:
3. Дальше создаём view для отображения в CI:
<html>
<head>
<meta http-equiv=»content-type» content=»text/html; charset=UTF-8″>
<script type=»text/javascript» src=»<?php echo base_url(); ?>swfupload/jquery-1.3.2.js»></script>
<script type=»text/javascript» src=»<?php echo base_url(); ?>swfupload/swfupload.js»></script>
<script type=»text/javascript» src=»<?php echo base_url(); ?>swfupload/swfupload.queue.js»></script>
<script type=»text/javascript» src=»<?php echo base_url(); ?>swfupload/fileprogress.js»></script>
<script type=»text/javascript» src=»<?php echo base_url(); ?>swfupload/handlers.js»></script>
<link href=’<?php echo base_url(); ?>swfupload/default.css’ rel=»stylesheet» type=»text/css» />
<script type=»text/javascript»>
$(document).ready(function(){
var upload1;
upload1 = new SWFUpload({
// Backend Settings
upload_url: «<?php echo base_url(); ?>index.php/swfupload/do_upload»,
post_params: {«PHPSESSID» : «r1b26raj2pe1ef637fv1mg3dk7″},
// File Upload Settings
file_size_limit : «1024″, // 100MB
file_types : «*.jpg;*.gif;*.png»,
file_types_description : «All Files»,
file_upload_limit : «10″,
file_queue_limit : «3″,
debug : true,
// Event Handler Settings (all my handlers are in the Handler.js file)
file_dialog_start_handler : fileDialogStart,
file_queued_handler : fileQueued,
file_queue_error_handler : fileQueueError,
file_dialog_complete_handler : fileDialogComplete,
upload_start_handler : uploadStart,
upload_progress_handler : uploadProgress,
upload_error_handler : uploadError,
upload_success_handler : uploadSuccess,
upload_complete_handler : uploadComplete,
// Button Settings
button_image_url : «<?php echo base_url(); ?>swfupload/XPButtonUploadText_61x22.png»,
button_placeholder_id : «spanButtonPlaceholder1″,
button_width: 61,
button_height: 22,
// Flash Settings
flash_url : «<?php echo base_url(); ?>swfupload/flash/swfupload.swf»,
custom_settings : {
progressTarget : «fsUploadProgress1″,
cancelButtonId : «btnCancel1″
},
// Debug Settings
debug: false
});
});
</script>
</head>
<body>
<div>
<div class=»fieldset flash» id=»fsUploadProgress1″>
<span class=»legend»>Large File Upload Site</span>
</div>
<div style=»padding-left: 5px;»>
<span id=»spanButtonPlaceholder1″></span>
<input id=»btnCancel1″ type=»button» value=»Cancel Uploads» onclick=»cancelQueue(upload1);» disabled=»disabled» style=»margin-left: 2px; height: 22px; font-size: 8pt;» />
<br />
</div>
</div>
</body>
</html>
В принципе, ничего сверхъестественного, все настройки можно найти на сайте разработчиков SWFUpload. Хочу обратить ваше внимание на то, что подключены все упомянуты мною файлы *.js, а в качестве обработчика с серверной стороны указан index.php/swfupload/do_upload. Нам этот обработчик ещё предстоит создать. Вот этим и займёмся.
4. Создаём контроллер для нашего мультизагрузчика. Лично я особо ничего не выдумывал и взял для начала стандартный пример для загрузки файлов из помощи по Codeigniter. Собственно, вот сам контроллер:
<?php if ( ! defined(‘BASEPATH’)) exit(‘No direct script access allowed’);
class Swfupload extends Controller {
function Swfupload()
{
parent::Controller();
$this->load->helper(array(‘form’, ‘url’));
}
function index()
{
$this->load->view(‘swfupload’);
}
function do_upload()
{
$config['upload_path'] = ‘./uploads/’; // server directory
$config['allowed_types'] = ‘gif|jpg|png’; // by extension, will check for whether it is an image
$config['max_size'] = ’1000′; // in kb
$config['max_width'] = ’1024′;
$config['max_height'] = ’768′;
$this->load->library(‘upload’, $config);
// $this->load->library(‘Multi_upload’);
$files = $this->upload->do_upload(‘Filedata’);
if ( ! $files )
{
$error = array(‘error’ => $this->upload->display_errors());
$this->load->view(‘upload_form’, $error);
}
else
{
$data = array(‘upload_data’ => $files);
$this->load->view(‘upload_success’, $data);
}
}
}
?>
Все, как видите, предельно просто (-: Единственное, на что обращаю ваше внимание, это вызов нашего метода контроллера, отвечающего, собственно, за загрузку:
$files = $this->upload->do_upload(‘Filedata’);
Здесь ‘Filedata’ — это id поля по умолчанию, по которому и передаётся, собственно, файл. В принципе, оно может быть произвольным, необходимо только при инициализации указать соответствующий параметр: file_post_name. Но и это ещё не всё (-: При настройках по умолчанию CI не станет загружать файлы… Поэтому необходимо ещё произвести некоторые настройки, о чём подробно написано вот тут:
открываем файл system/application/config/mimes.php и для необходимых расширений файлов (в моём случае это jpg, gif и png) меняем на следующее:
‘gif’ => array(‘image/gif’, ‘application/octet-stream’),
‘jpeg’ => array(‘image/jpeg’, ‘image/pjpeg’, ‘application/octet-stream’),
‘jpg’ => array(‘image/jpeg’, ‘image/pjpeg’, ‘application/octet-stream’),
‘jpe’ => array(‘image/jpeg’, ‘image/pjpeg’, ‘application/octet-stream’),
‘png’ => array(‘image/png’, ‘image/x-png’, ‘application/octet-stream’),
Теперь CI чудесным образом будет принимать и складывать все ваши картинки в указанной Вами директории, в моём случае это /uploads/. Вот и всё, что касается того, как подружить Codeigniter и SWFUpload.
Но мой туториал на этом не заканчивается! (-: Если Вы внимательно посмотрите на примеры использования, то увидите, что прогресс-бар загрузки файлов разного цвета когда файл поставлен в очередь загрузки, когда загружается и когда уже загружен. Ну вот мне не подходили данные цвета, указанные по умолчанию, ну не вписываются они в цветовую гамму моего дизайна! (-: поэтому было решено изменить цвета под свой дизайн. Первое, что пришло в голову — это всё сделано в swf-файле и мне срочно нужен декомпилятор, чтоб получить fla-файл и там поменять цвета… но всё оказалось гораздо прозаичнее: все цвета меняются в файле default.css. В частности идёте в раздел «Table Styles», там есть соответствующие разделы:
- /* Error */
.red {
border: solid 1px #B50000;
background-color: #FFEBEB;
}
- /* Current */
.green {
border: solid 1px #DDF0DD;
background-color: #FFFFCC;
}
- /* Complete */
.blue {
border: solid 1px #CEE2F2;
background-color: #f6de76;
}
Думаю, из названий понятно, где, когда и что используется (-: Правда после моих изменений blue уже как бы и не blue, да и green уже далеко не green… ну да меня это даже как-то совсем и не волнует (((-: Главное, что оно мне по цвету подходит (-:
Вот теперь уже точно всё! Надеюсь, кому-то это поможет (-:
P.S. Если вдруг что-то не получится — свистите, выложу полностью исходники (-:
P.P.S. Всем замечательный плагин SWFUpload, но вот надписи-то в нём на английском! Как бы меня это не сильно расстроило, но решил и это настроить (-: Оказалось всё до ужаса прозаично, даже никаких танцев с бубном (-: Просто открываете файл handlers.js и правите там соответствующие сообщения, лично я пока только исправил «Pending…», «Uploading…» и «Complete» на соответственно «Ожидает…», «Идёт загрузка…» и «Загружено». Так же в этом файле можно настроить и сообщения об ошибках и т.п.
Июль 10th, 2009 by none | 10 комментариев