Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

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

Anna | 31.05.2014 | нет комментариев

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

Вот собственно и все, верю на полезность материала.

Источник: programmingmaster.ru

Оставить комментарий
Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2017 © BB3x.ru - русская поддержка форума phpBB