Добрый день!
Долгое время на просторах интернета я искал информацию о реализации 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 функции:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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:
|
1 2 3 4 5 |
- jquery.fileupload.js - jquery.fileupload-video.js - jquery.fileupload-process.js - jquery.iframe-transport.js - upload.js //В комплекте не идет - напишем сами |
И CSS файл:
|
1 |
- css/jquery.fileupload.css |
Добавляем наш INPUT на страницу:
|
1 2 3 4 5 6 |
<?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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(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) поможет найти много интересных вещей, таких как: количество отправленных файлов, ошибки и многое другое.
Вот собственно и все, надеюсь на полезность материала.
https://corp2.info/razrabotka-i-sozdanie-sajtov-internet-magazinov-veb-proektov-kiev-1038.html
Leave a Reply