Июнь | 2016 | Информационный портал К2®

Monthly Archives: Июнь 2016

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

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

И CSS файл:

- css/jquery.fileupload.css

1	- 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(); ?>

<?php echo form_open_multipart('/admin/upload', array('id' => 'fileupload')); ?>

<span>Добавить файл</span>

</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');
            }
        }
    }
});  
});

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

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

Разработка и создание сайтов, интернет-магазинов, веб-приложений, порталов, лэндингов, мобильных приложений (Киев)

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

Posted on 21.06.2016 by 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. Верстаем таблицу товаров, с которой и будет работать пользователь:

<table id="othdetails" class="table table-hover borderbottom">
    <thead>
        <tr>
            <th>№ п/п</th>
            <th>Фото</th>
            <th>Описание</th>
            <th>шт</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="col-xs-2 col-md-1" style="vertical-align:middle;"></td>
            <td style="width:110px;">
                <img src="photo_icon.png" alt="Загрузить фото" class="img-circle othdet_photo"/>
                <input class="form-control" type="hidden" name="dform_oth_details_photo[]" value=""/>
            </td>
            <td><textarea name="dform_oth_details_descr[]" class="form-control" rows="3" placeholder="Описание детали"></textarea></td>
            <td class="col-xs-2 col-md-1" style="vertical-align:middle;"><input name="dform_oth_details_cnt[]" type="number" class="form-control" value="1" placeholder="шт"/></td>
            <td style="vertical-align:middle;text-align:right;"><span class="glyphicon glyphicon-remove removebtn" aria-hidden="true"></span></td>
        </tr>
    </tbody>
</table>

<thead>

<tr>

<th>Описание</th>

</tr>

</thead>

<tbody>

<tr>

</td>

</tr>

</tbody>

</table>

В строке товара мы имеем:

<img src="photo_icon.png" alt="Загрузить фото" class="img-circle othdet_photo"/>

1	<img src="photo_icon.png" alt="Загрузить фото" class="img-circle othdet_photo"/>

— иконка, клик которой будет имитировать клик /> в форме загрузки фото,

<input class="form-control" type="hidden" name="dform_oth_details_photo[]" value=""/>

1	<input class="form-control" type="hidden" name="dform_oth_details_photo[]" value=""/>

— это наш скрытый input, отвечающий за имя фото,

<textarea name="dform_oth_details_descr[]" class="form-control" rows="3" placeholder="Описание детали"></textarea>

1	<textarea name="dform_oth_details_descr[]" class="form-control" rows="3" placeholder="Описание детали"></textarea>

— описание,

<input name="dform_oth_details_cnt[]" type="number" class="form-control" value="1" placeholder="шт"/>

1	<input name="dform_oth_details_cnt[]" type="number" class="form-control" value="1" placeholder="шт"/>

— количество штук.

3. Пишем PHP-код загрузки файла:

public function uploadOthDetPhoto()
    {
        $this->isDformSet();
        $config['upload_path'] = 'public/uploads/othdet/';
        $config['allowed_types'] = 'gif|jpg|png';
        $config['max_size'] = '10240';
        $config['encrypt_name'] = true;
        $this->load->library('upload', $config);
        $this->upload->initialize($config);
        $this->upload->do_upload('photo');
        $arrErrors = $this->upload->display_errors();
        if (!empty($arrErrors) > 0){
            echo 'error';
        }else{
            $arrPhotoData = $this->upload->data();
            $strFileName = $arrPhotoData['file_name'];
            echo $strFileName;
            $intMaxWidth = 800;
            if ($arrPhotoData['image_width'] > $intMaxWidth){
                unset($config);
                $config['image_library'] = 'gd2';
                $config['source_image']	= $arrPhotoData['full_path'];
                $config['width'] = $intMaxWidth;
                $config['height'] = $intMaxWidth*$arrPhotoData['image_height']/$arrPhotoData['image_width'];
                $config['maintain_ratio'] = TRUE;
                $this->load->library('image_lib', $config); 
                $this->image_lib->resize();
            }
        }
    }

public function uploadOthDetPhoto()

{

$this->isDformSet();

$config['upload_path'] = 'public/uploads/othdet/';

$config['allowed_types'] = 'gif|jpg|png';

$config['max_size'] = '10240';

$config['encrypt_name'] = true;

$this->load->library('upload', $config);

$this->upload->initialize($config);

$this->upload->do_upload('photo');

$arrErrors = $this->upload->display_errors();

if (!empty($arrErrors) > 0){

echo 'error';

}else{

$arrPhotoData = $this->upload->data();

$strFileName = $arrPhotoData['file_name'];

echo $strFileName;

$intMaxWidth = 800;

if ($arrPhotoData['image_width'] > $intMaxWidth){

unset($config);

$config['image_library'] = 'gd2';

$config['source_image'] = $arrPhotoData['full_path'];

$config['width'] = $intMaxWidth;

$config['height'] = $intMaxWidth*$arrPhotoData['image_height']/$arrPhotoData['image_width'];

$config['maintain_ratio'] = TRUE;

$this->load->library('image_lib', $config);

$this->image_lib->resize();

}

Мой проект на CodeIgniter, поэтому код вот такой, но в целом, суть в следующем: мы просто загружаем и переименовываем полученный из формы файл, если всё проходит успешно, выводим в наш iframe его имя, если нет — «error».

4. Пишем Javascript, который будет контролировать весь процесс:

$(function(){
    function rownumbers(){
        $('#othdetails tbody tr').each(function(i) {
            var number = i + 1;
            $(this).find('td:first').text(number);
        });
    }
    
    function update(){
        var url = '<?=site_url('otherdetails/updateOthDet')?>';
        var postData = $('.form-control').serialize();
        $.post(url, postData, function(){}, 'json');
    }
    
    var curimg = '';
    var intervalID = '';
    
    function checkphotoname() {
        var linkedFrame = document.getElementById('hiddenframe');
        var content = linkedFrame.contentWindow.document.body.innerHTML;
        var completed = false;
        if (content === 'error'){
            curimg.attr('src','<?=base_url()?>public/img/photo_icon.png');
            $('#error').show(200).delay(6000).hide(200);
            $('#error').html('<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> Фото не было загружено. Максимальный размер фото - 10 Мб, форматы: jpg,png,gif.');
            completed = true;
        }
        else
        if (content !== ''){
            curimg.parent().children('.form-control').val(content);
            curimg.attr('src','<?=base_url()?>public/uploads/othdet/' + content);    
            completed = true;
        }
        if (completed === true){
            update();
            clearInterval(intervalID);
            $('#hiddenframe').contents().find('body').html('');
        }
    }
    
    rownumbers();
    
    $(document).on('click', '.othdet_photo', function(){
        $('#hiddenframe').contents().find('body').html('');
        curimg = $(this);
        curimg.attr('src','<?=base_url()?>public/img/photo_icon.png');
        curimg.parent().children('.form-control').val('');
        update();
        $('#photoloader').click();
    });
    
    $('#photoloader').change(function(){
        curimg.attr('src','<?=base_url()?>public/img/indicator.gif');
        $('#othdetphotoform').submit();
        $('#photoloader').val('');
    });
    
    $('#othdetphotoform').submit(function(){
        intervalID = setInterval(checkphotoname, 500);
    });
    
    $(document).on('change', '.form-control', function(){
        update();
    });
    
    $("#addnewdet").click(function(){
        var emp = 0;
        $(".form-control[name!='dform_oth_details_photo[]']").each(function(indx){
            if ($(this).val() === ''){
                emp = 1;
                $(this).focus();
             }    
        });    
        if (emp === 1){
            $('#error').show(200).delay(2000).hide(200);
            $('#error').html('<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> Пожалуйста, заполните все поля');
        }else{
            var row = '<tr><td class="col-xs-2 col-md-1" style="vertical-align:middle;"></td><td style="width:110px;"><img src="<?=base_url()?>public/img/photo_icon.png" alt="Загрузить фото" class="img-circle othdet_photo"/><input class="form-control" type="hidden" name="dform_oth_details_photo[]" value=""/></td><td><textarea name="dform_oth_details_descr[]" class="form-control" rows="3" placeholder="Описание детали"></textarea></td><td class="col-xs-2 col-md-1" style="vertical-align:middle;"><input name="dform_oth_details_cnt[]" type="number" class="form-control" value="1" placeholder="шт"/></td><td style="vertical-align:middle;text-align:right;"><span class="glyphicon glyphicon-remove removebtn" aria-hidden="true"></span></td></tr>';
            $("#othdetails tbody").append(row);
            rownumbers();
            $('[name="dform_oth_details_descr[]"]').last().focus();
        }    
    });
    
    $(document).on('click', '.removebtn', function(){
        $(this).parent().parent().remove();
        update();
        rownumbers();
    });
    
});

$(function(){

function rownumbers(){

$('#othdetails tbody tr').each(function(i) {

var number = i + 1;

$(this).find('td:first').text(number);

});

}

function update(){

var url = '<?=site_url('otherdetails/updateOthDet')?>';

var postData = $('.form-control').serialize();

$.post(url, postData, function(){}, 'json');

}

var curimg = '';

var intervalID = '';

function checkphotoname() {

var linkedFrame = document.getElementById('hiddenframe');

var content = linkedFrame.contentWindow.document.body.innerHTML;

var completed = false;

if (content === 'error'){

curimg.attr('src','<?=base_url()?>public/img/photo_icon.png');

$('#error').show(200).delay(6000).hide(200);

$('#error').html('<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> Фото не было загружено. Максимальный размер фото - 10 Мб, форматы: jpg,png,gif.');

completed = true;

}

else

if (content !== ''){

curimg.parent().children('.form-control').val(content);

curimg.attr('src','<?=base_url()?>public/uploads/othdet/' + content);

completed = true;

}

if (completed === true){

update();

clearInterval(intervalID);

$('#hiddenframe').contents().find('body').html('');

}

rownumbers();

$(document).on('click', '.othdet_photo', function(){

$('#hiddenframe').contents().find('body').html('');

curimg = $(this);

curimg.attr('src','<?=base_url()?>public/img/photo_icon.png');

curimg.parent().children('.form-control').val('');

update();

$('#photoloader').click();

});

$('#photoloader').change(function(){

curimg.attr('src','<?=base_url()?>public/img/indicator.gif');

$('#othdetphotoform').submit();

$('#photoloader').val('');

});

$('#othdetphotoform').submit(function(){

intervalID = setInterval(checkphotoname, 500);

});

$(document).on('change', '.form-control', function(){

update();

});

$("#addnewdet").click(function(){

var emp = 0;

$(".form-control[name!='dform_oth_details_photo[]']").each(function(indx){

if ($(this).val() === ''){

emp = 1;

$(this).focus();

}

});

if (emp === 1){

$('#error').show(200).delay(2000).hide(200);

$('#error').html('<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> Пожалуйста, заполните все поля');

}else{

var row = '<tr><td class="col-xs-2 col-md-1" style="vertical-align:middle;"></td><td style="width:110px;"><img src="<?=base_url()?>public/img/photo_icon.png" alt="Загрузить фото" class="img-circle othdet_photo"/><input class="form-control" type="hidden" name="dform_oth_details_photo[]" value=""/></td><td><textarea name="dform_oth_details_descr[]" class="form-control" rows="3" placeholder="Описание детали"></textarea></td><td class="col-xs-2 col-md-1" style="vertical-align:middle;"><input name="dform_oth_details_cnt[]" type="number" class="form-control" value="1" placeholder="шт"/></td><td style="vertical-align:middle;text-align:right;"><span class="glyphicon glyphicon-remove removebtn" aria-hidden="true"></span></td></tr>';

$("#othdetails tbody").append(row);

rownumbers();

$('[name="dform_oth_details_descr[]"]').last().focus();

}

});

$(document).on('click', '.removebtn', function(){

$(this).parent().parent().remove();

update();

rownumbers();

});

Вот тут объясню подробнее:

function rownumbers()

1	function rownumbers()

— просто расставляет порядковые номера в таблице,

function update()

1	function update()

— отправляет на сервер все текстовые поля нашей таблицы товаров. Их обработку в рамках этой статьи упоминать смысла нет,

var curimg = '';
    var intervalID = '';

1 2	var curimg = ''; var intervalID = '';

— указываем переменные, которые будут содержать ссылку на текущее фото и таймер. Подробнее об этом чуть позже;

function checkphotoname()

1	function checkphotoname()

— одна из основных функций: отвечает за обработку результата загрузки фото на основе содержимого нашего скрытого iframe. Эта функцию запускается с интервалом при отправке формы фото и заканчивает своё выполнение подстановкой миниатюры фото вместо фото иконки или выдачей сообщения об ошибке при обнаружении изменения содержимого iframe, то есть по окончании обработки фото сервером;

rownumbers();

1	rownumbers();

— просто расставляет порядковые номера в таблице при загрузке страницы — я не включил в статью то, что эта страница используется как при первом добавлении товаров в список, так и при редактировании этого списка, то есть таблица товаров может быть изначально не пустой;

$(document).on('click', '.othdet_photo', function(){ ...

1	$(document).on('click', '.othdet_photo', function(){ ...

— эмулируем клик input file в форме загрузки изображения при клике фото-иконки (так как пользователь может передумать использовать ранее загруженное фото, очищаем его перед выбором следующего);

$('#photoloader').change(function(){ ...

1	$('#photoloader').change(function(){ ...

— отправляем форму загрузки фото на сервер при изменении поля фото;

$('#othdetphotoform').submit(function(){ ...

1	$('#othdetphotoform').submit(function(){ ...

— вызываем с интервалом вышеописанную функцию обработки результата загрузки фото на сервер;

$(document).on('change', '.form-control', function() ...

1	$(document).on('change', '.form-control', function() ...

— при изменении любого поля (в том числе и имени фото) в списке товаров отправляем его весь на сервер;

$("#addnewdet").click(function(){ ...

1	$("#addnewdet").click(function(){ ...

— добавляет строку в таблицу товаров;

$(document).on('click', '.removebtn', function(){ ...

1	$(document).on('click', '.removebtn', function(){ ...

— удаляет строку из таблицы товаров.

Источник: https://habrahabr.ru/post/256197/

Разработка и создание сайтов, интернет-магазинов, веб-приложений, порталов, лэндингов, мобильных приложений (Киев)

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

Posted on 11.06.2016 by rudjuk Leave a comment

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

Posted on 11.06.2016 by rudjuk Leave a comment

Пн	Вт	Ср	Чт	Пт	Сб	Вс
« Май				Июл »
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30