Ajax загрузка файлов средствами jQuery и CodeIgniter

Долгое время на просторах интернета я искал информацию о реализации 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) поможет найти много интересных вещей, таких как: количество отправленных файлов, ошибки и многое другое.

Вот собственно и все, надеюсь на полезность материала и драгоценный инвайт.