Загрузка изображений и отображение без перезагрузки страницы — rpilot62.ru

Загрузка изображений неотъемлемая часть любого веб-приложения, и веб-разработчик всегда старается сделать ее наиболее удобной для пользователя.

Стандартная HTML форма не дает нам возможность наблюдать за процессом загрузки да и к тому же данные отправляются с перезагрузкой страницы, это очень неудобно. В интернете можно найти множество плагинов, чтобы доработать стандартную форму и реализовать более удобную отправку данных. Однако можно обойтись и без сторонних плагинов, реализовав форму загрузки, используя библиотеку Jquery.

Отправка изображения на сервер, без перезагрузки документа

Создайте страницу, в заголовке подключите библиотеку jquery, в тело документа вставьте форму с уникальным идентификатором id="formupload".

<!doctype html> <html> <head>   <meta charset="utf8" />   <title>Image Upload</title>   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> </head> <body> <form action="upload-images.php" method="post" enctype="multipart/form-data" id="formupload">   <input type="file" name="file" id="fileupload" />   <button>Загрузить</button> </form> </body> </html>

Далее необходимо создать обработчик событий на js, который будет отлавливать момент отправки формы, обрабатывать ее данные и уже посредством Ajax отправлять их (наше изображение) на сервер.

В заголовок документа после подключения библиотеки Jquery, вставим следующий js код.

Код срабатывает, когда пользователь кликает на кнопку “Загрузить”. Форма пытается отправить данные на сервер, однако наш обработчик событий отлавливает этот момент.

Скрипт считывает свойства указанные в форме (метод отправки и путь до серверного сценария).

Jquery загрузка изображений

Далее используя объект FormData, подготавливается форму для отправки ее Ajax запросом. Функция, опции success, выполнится в случае успешной отправки формы и получения результата, от серверного сценария в формате json , т.к. dataType: "json" (Серверный сценарий будет рассмотрен ниже, но заранее хочу пояснить, что в результате успешной загрузки изображения, от сервера приходит путь до картинки, в переменной filelink). Далее создается новый элемент <img>, которому присваивается путь загруженного изображения и помещается в форму. return false; в конце функции предотвращает отправку формы, а значить и перезагрузки страницы.

Серверный сценарий обработки изображений

Данные формы отсылаются на сервер, где они будут обработаны php скриптом указанным в параметре url функции $.ajax. Далее расположен базовый обработчик (код взят с сайта imperavi.com)

<?php //Путь до папки с изображениями, где хранятся загруженные изображения $dir = "/sitecom/images/"; $_FILES["file"]["type"] = strtolower($_FILES["file"]["type"]); if ($_FILES["file"]["type"] == "image/png" || $_FILES["file"]["type"] == "image/jpg" || $_FILES["file"]["type"] == "image/gif" || $_FILES["file"]["type"] == "image/jpeg" || $_FILES["file"]["type"] == "image/pjpeg") {   // Новое имя изображения   $filename = md5(date("YmdHis")).".jpg";   $file = $dir.$filename;   // Копирование файла   move_uploaded_file($_FILES["file"]["tmp_name"], $file);   // Ответ сервера: путь до загруженного файла   $array = array(     "filelink" => "images/".$filename   );   echo stripslashes(json_encode($array)); } ?>

Индикаторы загрузки или прелоадеры

На данном этапе у нас уже готова загрузка изображения, но все, же есть неудобство т.к. пользователь не имеет визуального наблюдения за процессом загрузки.

Далее представлены два варианта прелоадера:

Статичный индикатор

Статичный, т.к. он не дает представления о количестве загруженных данных, а лишь появляется на странице в момент оправки данных на сервер, и скрывается, когда данные отправлены. В качестве индикатора можете создать gif изображение, с помощью одного из специализированных онлайн сервисов, к примеру ajaxload.info

Вставьте в форму или другое местоположение на странице html код прелоадера, в данном случае в форму добавлен блок <div class="preloader">…</div>

Также необходимо внести изменения в js скрипт, добавив методы ajaxStart и ajaxStop, соответственно код находящийся в первом будет выполняться при начале выполнения ajax запроса, второй при его остановке.

И добавить CSS стиль, скрывающий прелоадер при первоначальной загрузке документа.

Динамичный индикатор загрузки

Динамический индикатор в отличие от статического, показывает пользователю процент загруженных данных.

HTML & CSS: Для создания простейшего “прогресс бара” нам понадобится два блока <div>, первый имеет фиксированную ширину, второй вложен в первый, будет наращиваться на величину полученную при выполнении js кода.

<style> … </style> … <form> …   <div class="progress">     <div></div>   </div> </form>

JS: Чтобы получить информацию о количестве загруженных данных воспользуемся объектом XMLHTTPRequest. Далее представлена функция, с ее помощью можно слушать сервер для получения данных о процессе загрузки. Переменная percentComplete, рассчитывает какое количество данных уже загружено.

xhr: function() {   var xhr = new window.XMLHttpRequest();   xhr.upload.addEventListener("progress", function(evt){     if (evt.lengthComputable) {       var percentComplete = evt.loaded / evt.total;     }   }, false); return xhr; }

Совместив все вместе, получим следующий код:

По желанию, вы можете совмещать два типа прелоадера вместе.

Размер загружаемого файла

Иногда бывает необходимо узнать размер загружаемого файла, перед отправкой его на сервер, следующий код показывает, как это сделать

Добрый вечер!

Долгое время на просторах интернета я искал информацию о реализации AJAX загрузки файлов для CodeIgniter. Разные разработчики предлагали разные технологии и примеры реализации. Я перепробовал их все, но ни одна из них не была достаточно проста и функциональна одновременно. Лишь недавно я открыл для себя jQuery File Uploader. «Он ничем не отличает от остальные» — скажите вы, но это ни так.

Загрузка изображения на сервер с предварительным просмотром при помощи HTML5 Drag and Drop

Его главное отличие — это простота и хорошая документация с примерами. В документации разобраны все callback’и, описаны все options. Внедрение в любую систему не занимает много времени.

Сегодня я покажу как можно очень просто организовать multipart загрузку файлов на сервер + drug&drop в CodeIgniter.

jQuery File Uploader + CodeIgniter

Из коробки CodeIgniter предлагает нам использовать библиотеку , которая позволяет контролировать передаваемые файлы, ограничивая загрузку по типу, размеру, ширине и высоте изображения. Использовать ее легко и удобно, но следует отметить небольшое ограничение налагаемое на INPUT данной библиотекой. Поле INPUT должно обязательно иметь параметр name=«userfile». Соглашаемся с этим фактом и переходим в Controller к функции которая будет вызывать библиотеку Upload и, собственно, сохранять наши файлы на диск.

Пример реализации PHP функции:

Внимание! Для того, что бы у Вас работали все allowed_types необходимо дописать недостающие MIME-Types в конфигурационный файл /application/config/mimes.php

У нас готова функция для сохранения файла на сервер. Переходим к клиентской части. Нам понадобится скачать с Github jQuery File Upload . Плагин предоставляет большие возможности, но все их использовать мы не будет, воспользуемся лишь загрузкой нескольких файлов, drug&drop и progressall.

Подключаем на страницу загрузки необходимые JS:

И CSS файл:

Добавляем наш INPUT на страницу:

Осталось совсем не много — написать upload.js, который будет прослушивать событие изменения поля INPUT и вызывать загрузку выбранного файла. «А где же обещанный Drug&Drop?» — спросите Вы. Drug&Drop уже работает благодаря jQuery File Upload. Вместо вызова стандартного диалога выбора файла вы можете перетащить сразу несколько файлов на страницу и они в порядке очереди загрузятся на сервер.

И на последок Upload.js

data — это наш ответ от сервера, но он не является массивом с информацией о загруженном файле. Вся информация в формате JSON хранится в Data.Result. Кстати говоря console.log(data) поможет найти много интересных вещей, таких как: количество отправленных файлов, ошибки и многое другое.

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

ссылка на оригинал статьи http://habrahabr.ru/post/200916/

Статьи / PHP /

Скрипт загрузки изображения на сайт PHP


Возможно, Вы уже сталкивались на своём сайте с проблемой загрузки изображения на сайт? Допустим, пользователю нужно загрузить аватарку или изображение к какой-либо записи или статье? И как обезопасить себя от загрузки на сервер вредоносного кода JS вместо изображения?

В страницу с формой Загрузки нужно вставить форму:

Код HTML

Размер изображения не превышает 512 Кб, пиксели по ширине не более 500, по высоте не более 1500. 
<form name="upload" action="download_img.php" method="POST" ENCTYPE="multipart/form-data"> 
Выберите файл для загрузки: 
<input type="file" name="userfile">
<input type="submit" name="upload" value="Загрузить"> 
</form>

Обычная форма загрузки изображения. При нажатии на Загрузить мы перейден на страницу download_img.php.

Форма будет ссылать на файл download_img.php.

Отложенная загрузка изображений. 5 техник ленивой загрузки

В нём для того, чтобы обезопасить сервер от загрузки посторонних файлов вместо изображений достаточно указать проверку размера файла. В случае возврата FALSEв ответ на размер изображения, файл загружен НЕ будет.

Код PHP

<?php
$uploaddir = ‘images/’;
// это папка, в которую будет загружаться картинка
$apend=date(‘YmdHis’).rand(100,1000).’.jpg’; 
// это имя, которое будет присвоенно изображению 
$uploadfile = "$uploaddir$apend"; 
//в переменную $uploadfile будет входить папка и имя изображения

// В данной строке самое важное — проверяем загружается ли изображение (а может вредоносный код?)
// И проходит ли изображение по весу. В нашем случае до 512 Кб
if(($_FILES[‘userfile’][‘type’] == ‘image/gif’ || $_FILES[‘userfile’][‘type’] == ‘image/jpeg’ || $_FILES[‘userfile’][‘type’] == ‘image/png’) && ($_FILES[‘userfile’][‘size’] != 0 and $_FILES[‘userfile’][‘size’]<=512000)) 

// Указываем максимальный вес загружаемого файла. Сейчас до 512 Кб 
  if (move_uploaded_file($_FILES[‘userfile’][‘tmp_name’], $uploadfile)) 
   { 
   //Здесь идет процесс загрузки изображения 
   $size = getimagesize($uploadfile); 
   // с помощью этой функции мы можем получить размер пикселей изображения 
     if ($size[0] < 501 && $size[1]<1501) 
     { 
     // если размер изображения не более 500 пикселей по ширине и не более 1500 по  высоте 
     echo "Файл загружен. Путь к файлу: <b>http:/yoursite.ru/".$uploadfile."</b>"; 
     } else {
     echo "Загружаемое изображение превышает допустимые нормы (ширина не более — 500; высота не более 1500)"; 
     unlink($uploadfile); 
     // удаление файла 
     } 
   } else {
   echo "Файл не загружен, вернитеcь и попробуйте еще раз";
   } 
} else { 
echo "Размер файла не должен превышать 512Кб";

?>

Для проверки на то, действительно загружается изображение или вредоносный код, используется встроенная в php функция getimagesize.

getimagesize($image);
Идёт проверка и на тип файла (изображение) и на его размер.

Не определится, если это не изображение.

Возможно, код и не самый короткий, но поставленные задачи выполняет.
Спасибо за внимание!

 

Предыдущая статья
Что такое htaccess? И как он работает?Следующая статья
Как найти и заменить строку в файле PHP?

Похожие статьи

Комментарии к статье (vk.com)

Добавить комментарий

Закрыть меню