Добрый день!
Долгое время на просторах интернета я искал информацию о реализации AJAX загрузки файлов для CodeIgniter. Разные разработчики предлагали разные технологии и примеры реализации. Я перепробовал их все, но ни одна из них не была достаточно проста и функциональна одновременно. Лишь недавно я открыл для себя jQuery File Uploader. «Он ничем не отличается от остальных» — скажите вы, но это не так. Его главное отличие — это простота и хорошая документация с примерами. В документации разобраны все callback'и, описаны все options. Внедрение в любую систему не занимает много времени.
Сегодня я покажу как можно очень просто организовать multipart загрузку файлов на сервер + drug&drop в CodeIgniter.
Из коробки CodeIgniter предлагает нам использовать библиотеку $this->load->library('upload');, которая позволяет контролировать передаваемые файлы, ограничивая загрузку по типу, размеру, ширине и высоте изображения. Использовать ее легко и удобно, но следует отметить небольшое ограничение налагаемое на INPUT данной библиотекой. Поле INPUT должно обязательно иметь параметр name=«userfile». Соглашаемся с этим фактом и переходим в Controller к функции которая будет вызывать библиотеку Upload и, собственно, сохранять наши файлы на диск.
Пример реализации PHP функции:
Внимание! Для того, что бы у Вас работали все allowed_types необходимо дописать недостающие MIME-Types в конфигурационный файл /application/config/mimes.php
У нас готова функция для сохранения файла на сервер. Переходим к клиентской части. Нам понадобится скачать с Github jQuery File Upload . Плагин предоставляет большие возможности, но все их использовать мы не будет, воспользуемся лишь загрузкой нескольких файлов, drug&drop и progressall.
Подключаем на страницу загрузки необходимые JS:
И CSS файл:
Добавляем наш INPUT на страницу:
Осталось совсем не много — написать upload.js, который будет прослушивать событие изменения поля INPUT и вызывать загрузку выбранного файла. «А где же обещанный Drug&Drop?» — спросите Вы. Drug&Drop уже работает благодаря jQuery File Upload. Вместо вызова стандартного диалога выбора файла вы можете перетащить сразу несколько файлов на страницу и они в порядке очереди загрузятся на сервер.
И на последок Upload.js
data — это наш ответ от сервера, но он не является массивом с информацией о загруженном файле. Вся информация в формате JSON хранится в Data.Result. Кстати говоря console.log(data) поможет найти много интересных вещей, таких как: количество отправленных файлов, ошибки и многое другое.
Вот собственно и все, надеюсь на полезность материала.
Долгое время на просторах интернета я искал информацию о реализации AJAX загрузки файлов для CodeIgniter. Разные разработчики предлагали разные технологии и примеры реализации. Я перепробовал их все, но ни одна из них не была достаточно проста и функциональна одновременно. Лишь недавно я открыл для себя jQuery File Uploader. «Он ничем не отличается от остальных» — скажите вы, но это не так. Его главное отличие — это простота и хорошая документация с примерами. В документации разобраны все callback'и, описаны все options. Внедрение в любую систему не занимает много времени.
Сегодня я покажу как можно очень просто организовать multipart загрузку файлов на сервер + drug&drop в CodeIgniter.
jQuery File Uploader + CodeIgniter
Из коробки CodeIgniter предлагает нам использовать библиотеку $this->load->library('upload');, которая позволяет контролировать передаваемые файлы, ограничивая загрузку по типу, размеру, ширине и высоте изображения. Использовать ее легко и удобно, но следует отметить небольшое ограничение налагаемое на INPUT данной библиотекой. Поле INPUT должно обязательно иметь параметр name=«userfile». Соглашаемся с этим фактом и переходим в Controller к функции которая будет вызывать библиотеку Upload и, собственно, сохранять наши файлы на диск.
Пример реализации PHP функции:
public function upload(){
$config['upload_path'] = "/application/uploads/";
$config['allowed_types'] = "jpg|jpeg|png|gif|flv|mp4|wmv|doc|docx|xsl|xslx|ppt|pptx|zip|rar|tar";
$config['max_size'] = 2048;
$config['max_width'] = 800;
$config['max_height'] = 600;
$config['encrypt_name'] = TRUE;
$this->load->library('upload', $config);
if ($this->upload->do_upload() == false) {
$error = array('error' => $this->upload->display_errors());
echo json_encode($error);
}else{
$data = $this->upload->data();
echo json_encode($data);
}
}
Внимание! Для того, что бы у Вас работали все allowed_types необходимо дописать недостающие MIME-Types в конфигурационный файл /application/config/mimes.php
У нас готова функция для сохранения файла на сервер. Переходим к клиентской части. Нам понадобится скачать с Github jQuery File Upload . Плагин предоставляет большие возможности, но все их использовать мы не будет, воспользуемся лишь загрузкой нескольких файлов, drug&drop и progressall.
Подключаем на страницу загрузки необходимые JS:
- jquery.fileupload.js
- jquery.fileupload-video.js
- jquery.fileupload-process.js
- jquery.iframe-transport.js
- upload.js //В комплекте не идет - напишем сами
И CSS файл:
- css/jquery.fileupload.css
Добавляем наш INPUT на страницу:
<?php echo form_open_multipart('/admin/upload', array('id' => 'fileupload')); ?>
<span class="fileinput-button">
<span>Добавить файл</span>
<input type="file" name="userfile" multiple>
</span>
<?php echo form_close(); ?>
Осталось совсем не много — написать upload.js, который будет прослушивать событие изменения поля INPUT и вызывать загрузку выбранного файла. «А где же обещанный Drug&Drop?» — спросите Вы. Drug&Drop уже работает благодаря jQuery File Upload. Вместо вызова стандартного диалога выбора файла вы можете перетащить сразу несколько файлов на страницу и они в порядке очереди загрузятся на сервер.
И на последок Upload.js
$(document).ready(function(){
$('#fileupload').fileupload({
dataType: 'json',
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('.progress .bar').css('width', progress + '%'); },
done: function (e, data) {
if(data.result.error != undefined){
$('#error').html(data.result.error); // выводим на страницу сообщение об ошибке если оно есть
$('#error').fadeIn('slow');
}else{
$('#error').hide(); //на случай если сообщение об ошибке уже отображалось
$('#files').append("<img class='img-polaroid' style='margin-left:15%;padding:10px;width:auto;height:250px' src=''>");
$('#success').fadeIn('slow');
}
}
}
});
});
data — это наш ответ от сервера, но он не является массивом с информацией о загруженном файле. Вся информация в формате JSON хранится в Data.Result. Кстати говоря console.log(data) поможет найти много интересных вещей, таких как: количество отправленных файлов, ошибки и многое другое.
Вот собственно и все, надеюсь на полезность материала.