Червень 2016 – К2® Cloud Info

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

21.06.2016 rudjuk Leave a comment

Добрый день! Долгое время на просторах интернета я искал информацию о реализации 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);
		}
	}

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 //В комплекте не идет - напишем сами

- jquery.fileupload.js

- jquery.fileupload-video.js

- jquery.fileupload-process.js

- jquery.iframe-transport.js

- upload.js //В комплекте не идет - напишем сами

И […]

Пошаговая инструкция по реализации загрузки файлов на сервер без перезагрузки страницы на PHP + Javascript

21.06.2016 rudjuk Leave a comment

Проблема Недавно я столкнулся с вполне, на мой взгляд, распространённой задачей: нужно обеспечить пользователю возможность загрузить на сервер любое число, скажем, картинок с комментарием к каждой из них в рамках одного интерфейса. В моём случае это было: фото товара, его описание и количество. Для наглядности прикладываю скриншот интерфейса: Идея и алгоритм решения Так как описания и фотографии для получения конечного результата можно изменять очень много раз, решено было осуществить следующую схему работы: фотографии загружаются на сервер на одной при клике на фото-иконку, при этом в случае успеха сервер возвращает имя картинки, а при неуспехе — «error». Соответственно, в случае успеха, фото-иконка заменяется на миниатюру загруженного фото, а в скрытое поле формы соответствующей строки сохраняется её имя, а при неуспехе мы получаем фото-иконку и пустое скрытое поле формы соответствующей строки, отвечающее за имя фото. Текстовая же информация при изменении любого поля формы отправляется на сервер вся в формате массив [имяФото, описаниеДетали, количествоШт] — это наиболее универсально: один и тот же метод отвечает за полное обновление списка товаров при их редактировании или удалении. Как известно, AJAX не умеет отправлять файлы, поэтому реализуем процедуру загрузки с помощью обычной формы, в качестве target которой укажем скрытый фрейм, который и будет перезагружаться вместо страницы. Практическая реализация Итак, в нашем распоряжении HTML, PHP и Javascript. Поехали: 1. Верстаем на странице форму для загрузки фото. Она содержит только один input, который мы спрячем с помощью css:

<form enctype="multipart/form-data" action="<?=site_url('otherdetails/uploadOthDetPhoto')?>" method="post" id="othdetphotoform" target="hiddenframe">
<input type="file" id="photoloader" name="photo"/>
</form>

<form enctype="multipart/form-data" action="<?=site_url('otherdetails/uploadOthDetPhoto')?>" method="post" id="othdetphotoform" target="hiddenframe">

</form>

2. Создадим на странице скрытый iframe, который и будет перезагружаться в результате отправки формы с файлом:

<iframe id="hiddenframe" name="hiddenframe" style="width:0px;height:0px;border:0px"></iframe>

1	<iframe id="hiddenframe" name="hiddenframe" style="width:0px;height:0px;border:0px"></iframe>

3. Верстаем таблицу […]

Диаграмма качества и цены

11.06.2016 rudjuk Leave a comment

Востребованность специалистов 3D графики на рынке

11.06.2016 rudjuk Leave a comment