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

Вот собственно и все, надеюсь на полезность материала.
Поделиться публикацией

Похожие публикации

Комментарии 5

    0
    Писали уже про этот плагин, не раз

    Навскидку:

    http://habrahabr.ru/post/140400/
    http://habrahabr.ru/post/158167/
      –1
      Не сомневаюсь, про этот плагин уже писали, но я не нашёл статьи про его применение для Codeigniter
        +2
        Боюсь оказаться неправым в попытке высказаться за большинство но все же.

        От того что Вы добавили несколько строк адаптированных под Codeigniter тема актуальней и интересней для общественности не станет.
        Особенно на фоне "родного" аплоадера.

        Быть может коли публикуете статью в контексте Codeigniter'а то раскроите тему более широко. Свою библиотечку небольшую быть может напишите и разжуете для жаждущих познавать. И/или раскроете какие нибудь подводные камни.

        А пока что слишком пусто и не ново.
          0
          Спасибо за критику, буду стараться делать лучше.
            0
            Да тут единственное, что можно добавить по-поводу CI — у него в библиотеке Upload бага, и он не всегда грузит png, даже если mime-type валидный )

      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

      Самое читаемое