Как отправить картинку на сервер
База данных фото с помощью HTML, PHP и MySQL
Есть два способа загрузки изображений: в базу данных или на сервер. В этой статье мы разберемся как с помощью HTML, PHP и MySQL создается база данных фото. Предполагается, что у вас есть базовые знания HTML, PHP и MySQL.
Три этапа загрузки изображения в базу данных
1. Создайте HTML-форму для загрузки.
2. Подключитесь к базе данных и сохраните изображения.
3. Отобразите изображения.
Шаг 1. Создайте HTML-форму
Шаг 2. Подключитесь к базе данных и сохраните изображение
Сначала нужно подключиться к базе данных. В примере мы используем БД «demo».
Шаг 3. Отображение сохраненных изображений из базы данных
Чтобы вывести изображения, нужно создать два файла. Это файл fetch_image.php.
Три шага для загрузки изображения на сервер
1. Создайте HTML-форму для загрузки изображения.
2. Сохраните путь к базе данных и изображение на сервере.
3. Выведите изображение.
Шаг 1. Создайте HTML-форму
Вы можете использовать HTML-форму из предыдущего примера.
Шаг 2. Сохранение изображения на сервере
На этом этапе мы получаем изображение и сохраняем его в каталоге, а затем сохраняем путь к изображению и имя файла в базе данных. Это файл store_image.php.
Шаг 3. Вывод изображений
Чтобы вывести изображение, нужно получить из базы данных имя файла и путь к нему. Это файл fetch_image.php.
Таким образом можно загрузить изображение в базу данных с помощью HTML, PHP и MySQL.
Пожалуйста, оставляйте свои отзывы по текущей теме материала. Мы крайне благодарны вам за ваши комментарии, дизлайки, подписки, лайки, отклики!
Пожалуйста, опубликуйте ваши мнения по текущей теме материала. Мы крайне благодарны вам за ваши комментарии, лайки, подписки, отклики, дизлайки!
Javascript: Отправка изображения на канвасе на сервер
Решил я сделать отправку изображения с канваса на сервер.
А что из этого получилось смотрите под катом.
Итак, нам нужен браузер, поддерживающий холст.
Я решил сделать возможность мышкой чего-нибудь нарисовать на канвасе и отправить эту картинку на сервер.
Поехали
Холст
Сразу скажу, что код javascript-овый будет написан на javascript`е.
Ничего против библиотек не имею, сам их использую. Просто, это более общий случай. При желании можно будет переписать под библиотеки.
Создаём канвас/холст (нужное подчеркнуть):
Теперь надо сделать так, чтобы можно было рисовать на канвасе.
Для рисования нам нужно получить контекст отображения 2D, создать путь, переместиться в начальную точку,
вызвать метод LineTo() для проведения линии в конечную точку, вызвать метод stroke() для рисования контура, закрыть путь.
Всё это можно видеть в моём коде, в обработчиках onmousedown, onmouseup и onmousemove.
Отправка на сервер
Но с холстом-то ладно, есть куча библиотек для работы с ним. Теперь о том, как отправлять картинки на сервер.
Нам нужно сделать ajax-запрос методом POST.
Только картиночку надо посылать не вот так:
«image=%01%02%03. », а как файл.
Нам нужно поставить Content-type не «application/x-www-form-urlencoded», а «multipart/form-data».
Это значит, что тело запроса будет состоять из других подзапросов, которые сами будут иметь свои собственные заголовки и тела.
Как выглядит тело такого запроса можно посмотреть в LiveHttpHeaders в Firefox-е, создав html-страничку с формой,
с атрибутом enctype=«multipart/form-data»:
Каждый такой подзапрос, соответствует определенному полю формы.
На рисунке у меня отправляется форма с текстовым полем с name=«id» и полем «file» для отправки файла.
Я загружаю файл «loading.gif»
Нам нужно придумать граничный разделитель (boundary), который будет разделять тела запросов.
На рисунке этим разделителем является строка «—————————12722593819037», этот разделитель должен разделять эти
подзапросы и не должен встречаться в них.
Перед каждым таким подзапросом должна быть строка «—» + boundary, а после всех — строка «—» + boundary + «—«
Об этом можно почитать здесь: rfc 1521
О form-data можно почитать в rfc 1867.
Замечу, что на 19.12.2010 в Хроме уже есть объект FormData для создания form-data, а в Файрфоксе будет только в 4 версии.
Для отправки содержимого канваса, будем использовать метод dataURL, который возвращает картинку в виде base64 строки.
Серверная часть
Для электронных писем можно написать заголовок «Content-Transfer-Encoding» со значением «base64» для указания того,
что прикрепленный файл зашифрован в base64. К сожалению у меня добавление такого заголовка ничего не дало.
Пришлось декодировать base64 на сервере самому.
Одно лишь маленькое «но», я скажу.
Когда читаешь файл кусочками и декодируешь из base64, нужно читать за один раз число байтов кратное 4.
Это связано с кодировкой base64. Она рассматривает каждые 3 байта, как набор из 4 6-битовых символов, а потом каждый
такой 6-битовый символ отображает как какой-нибудь обычный 8-битовый текстовый символ.
(если в конце не хватает двух или одного байта, то берутся нулевые байты, а в полученном тексте добавляется «=» или «==»)
Соответственно, если за один раз прочитать количество символов не кратное 4, то мы не получим картинки (можете проверить, подправив мой код).
Собственно, вот код декодирования картинки на PHP:
Собственно всё это можно посмотреть на труъкодинг.рф/canvas/
Слева будет картинка, чего-нибудь на ней рисуете, нажимаете кнопку «Send», картинка отправляется на сервер,
а потом отображается справа.
на яндексе иногда проскакивает сообщение «файл не найден», пробуйте несколько раз.
Website-create.ru
Если перед Вами встала задача отправить пользовательское изображение на свой веб-сервер, чтобы потом его как-то использовать (например, выводить в профиле пользователя, либо еще как-то), то в этом уроке я покажу Вам, как можно организовать такую отправку изображения при помощи php.
Возможно, Вы уже отправляли на сервер различную пользовательскую информацию при помощи html-форм и php-сценариев. Если Вы занимались этим раньше – прекрасно. Но между тем, чтобы отправлять простые текстовые поля информации, заполненные пользователем, и отправкой целого файла с компьютера пользователя на Ваш веб сервер есть кое-какая разница.
Изображения являются двоичными данными и для чтения двоичного файла нужен несколько другой тип интерпретации. Однако, веб-браузеры замечательно приспособлены к работе с файлами изображений форматов JPEG, GIF или PNG и могут замечательно выводить их на экраны наших мониторов.
Итак, чтобы какое-либо из пользовательских изображений можно было увидеть на Вашем ресурсе, пользователь должен отправить это изображение на Ваш веб-сервер. А Ваша задача заключается в получении файла изображения сервером от клиента.
Давайте перейдем к практике!
Отправка пользовательского изображения на веб-сервер
Создание html-формы
1. Давайте для начала создадим html-документ. Я назову его «send_image.html».
Этот документ будет содержать html-форму, с помощью которой пользователь сможет выбрать файл для отправки его со своей машины на Ваш веб-сервер.
Сразу сделаю оговорку: форму в этом примере я создаю только для отправки файла (чтобы сосредоточить все внимание на этом и не путать Вас в других возможных полях), но на практике, конечно же такая форма может содержать столько полей, сколько вам нужно (такие как: имя, e-mail адрес и прочее).
Код нашей html-страницы будет выглядеть вот так:
Теперь разъясним данный код.
Документ имеет формат html5. К документу подключена таблица стилей, код которой я приведу ниже.
Теперь посмотрим на саму форму.
В качестве значения атрибута «action» мы передаем файл-обработчик «send_img.php», который мы также создадим далее и который будет выполнять все манипуляции с выбранным для отправки файлом.
Очень важным составляющим здесь является атрибут «enctype» в теге «form», а также значение типа «file» в теге «input». С помощью всего этого мы настраиваем форму не только на отправку текстовой информации, но и на отправку двоичного файла изображения.
Также Вы могли заметить еще один тег «input» (самый первый), он имеет скрытый тип, и Ваши пользователи его не увидят. Однако, он содержит в себе информацию о максимально допустимом размере изображения (в данном случае 2Мбайта). Это нужно для того, чтобы Вам на сервер не отсылали гигантские фото.
2. Теперь давайте создадим файл таблицы стилей и наполним его содержимым.
Для этого примера я использовала самые простые стили, просто для того, чтобы страница смотрелась более или менее прилично. Вы можете создать свои стили или на этапе обучения и тестирования воспользоваться теми, которые предлагаю я.
Итак, создайте файл «style.css» и сохраните его в том же каталоге, что и html-файл. Если будете сохранять в отдельной папке, то исправьте путь к файлу в html-документе.
Содержимое файла таблицы стилей следующее:
В итоге, если сейчас открыть наш html-документ в браузере, то можно увидеть следующее:
1. Если Вы хотите тестировать Ваш будущий php-код и работу с базами данных с локального компьютера, то Вам необходимо будет установить Денвер.
2. Если Вы тестируете Ваш код с локального компьютера с установленным на него Денвером, то не забывайте, что, чтобы все работало корректно файл в браузере нужно запускать следующим образом: в командной строке браузера нужно прописать localhost/имя папки, в которой расположен файл/имя файла и нажать клавишу «Enter».
Иначе, если Вы просто запустите файл в браузере, щелкнув по нему два раза мышью, в дальнейшем протестировать php-код не получится.
Создаем php-сценарий
1. Мы подготовились к основной работе и сейчас настало время самого главного – мы будем создавать файл-обработчик.
Для начала создайте файл «send_img.php» и сохраните его в том же каталоге, что и основной html-файл.
Откройте файл «send_img.php» и пропишите в нем следующие строки:
Между этим двумя тегами (открывающим и закрывающим тегами php) и будет располагаться весь наш код, который мы начнем писать прямо сейчас.
2. Так как мы собираемся не просто копить пользовательские изображения, а, вероятно, впоследствии использовать их на своем ресурсе, то после того, как мы их получим и сохраним в определенном месте на своем веб сервере, нам еще и нужно будет где-то хранить пути к ним. И вероятнее всего, хранить путь до изображения мы будем в базе данных.
Поэтому первое, что нужно сделать – это соединиться с базой данных.
У Вас уже должна быть создана база данных, с которой Вы собираетесь работать. А также у Вас должно быть имя пользователя и пароль для соединения с этой базой. На веб-сервере Вы генерируете эти данные при добавлении новой базы данных. Если Вы не знаете, как это сделать в Денвере (в случае, если Вы тестируете код на локальной машине), то можете прочитать об этом в моей статье Создание базы данных MySql.
Итак, соединяемся с базой. Для этого пропишите в Вашем php-файле следующий код. Обратите внимание, что данные в скобках у Вас должны быть свои (кроме localhost ), это должно быть Ваше имя пользователя, пароль и имя базы, с которой соединяетесь.
На этом этапе нужно протестировать код, чтобы убедиться, что Вы соединились с базой успешно. Для этого откройте html-страницу в браузере и попробуйте нажать на кнопку отправки.
Если все хорошо, то после отправки Вы просто увидите белый экран, а если произошла ошибка, то Вы увидите сообщение об этой ошибке, подобное вот этому:
Если Вы увидели сообщение об ошибке, то проверьте правильность введенных данных: имени пользователя, пароля, имя базы. А также проверьте правильность синтаксиса.
Если ошибок нет, тогда идем дальше.
3. В ходе отправки могут возникать разные ошибки, например, пользователь не выберет никакого файла, но нажмет на кнопку отправки; или он выберет слишком большой файл; или вместо файла он захочет отправить текстовый документ.
Нам нужно как-то обрабатывать все эти ошибки и выводить соответствующие сообщения для пользователя.
Для этого мы сейчас напишем функцию, которую в дальнейшем будем использовать. Эта функция будет принимать 2 параметра: первый параметр будет общим сообщением о проблеме, а второй параметр будет конкретизировать проблему, обращая внимание на то, чем она вызвана. При запуске такая функция будет останавливать выполнение сценария и выводить соответствующие сообщения об ошибках.
Итак, добавьте в свой код следующие строки:
Теперь добавим пару переменных, которые нам понадобятся.
Первая переменная с именем «upload_dir» поможет нам определить каталог, в котором в последствии мы будем сохранять отправленные изображения. В ее значении в кавычках Вы должны прописать путь до папки, в которой собираетесь сохранять изображения. Если у Вас еще нет такой папки, то самое время ее создать в Вашей файловой системе. Имейте в виду, что в этом примере я тестирую код с помощью Денвера на локальной машине, и моя папка для изображений лежит в том же каталоге, что и php-файл. Поэтому мне достаточно в значении переменной прописать «user_images/». Вы должны исходить из своей файловой структуры, а также из того, как Вы задаете пути к файлам.
Вторая переменная будет содержать имя поля, которое мы указывали в атрибуте «name» в html-файле, для тега «input», отвечающего за отправку файла.
Таким образом к нашему коду можно добавить пару новых строк:
При отправке изображения могут возникнуть разные ошибки (изображение может быть не выбрано, не отправилось полностью, имеет слишком большой размер).
Для каждого конкретного случая, нам нужно вывести соответствующее сообщение. Чтобы подготовиться ко всем этим ситуациям, нам нужно создать массив, который мы самостоятельно и пронумеруем. Этот массив будет содержать возможные ошибки.
Добавьте следующие строки к Вашему коду:
Мы полностью подготовились, теперь переходим к действиям.
4. Первое, что мы сделаем – это проверим, не произошло ли ошибок во время отправки изображения. Здесь нам понадобится только что созданный массив и функция, которую мы написали ранее.
Когда ведется работа с файлами, интерпретатор php создает массив «$_FILES». В этом массиве ключом служит имя Вашего поля (переменная «$image_fildname») и таким образом этот массив связывается с отправляемым Вами изображение. Также этот массив содержит не только информацию о файле, но и о любых ошибках, которые могут произойти во время отправки. Частицей этой информации является элемент «$_FILES[$image_fildname][‘error’]», который возвращает «0», если отправка была успешной и число отличное от нуля в противном случае (именно поэтому созданный нами массив мы нумеровали с единицы, а не с нуля).
И теперь нам остается проверить возвращает ли это поле ноль. Если да, то проблем нет. А если возвращает другое число, то нужно вывести сообщение, какая именно проблема возникла (здесь нам поможет наша функция «handle_error»).
Итак, добавьте в Ваш файл следующий код:
Если сейчас Вы, например, не выберите никакого файла и попробуете нажать на кнопку отправки, то увидите соответствующее сообщение об ошибке.
Теперь нужно проверить, действительно ли то, что отправляет пользователь является изображением. Сделать это можно при помощи специальной функции «getimagesize». Проверка осуществляется следующим образом:
Попробуйте вместо изображения отправить, например, текстовый файл, и Вы увидите примерно следующее.
Также попробуйте протестировать и отправить нормальный файл. Если отправка прошла успешно, то Вы увидите только белый экран.
5. Проверки мы реализовали и теперь нам нужно переместить файл в подготовленное для него место.
У Вас уже должна быть создана папка, путь к которой Вы прописали в переменной «upload_dir».
В первую очередь, перед тем, как перемещать файл нам нужно сформировать для него уникальное имя.
Для этого сначала создадим переменную «now», в которой будет содержаться текущее время.
Далее, прямо в цикле while мы создадим переменную «upload_filename», которая будет содержать в себе значение переменной «upload_dir» (путь до нашей папки для изображений) плюс текущее время, дефис и исходное имя пользовательского файла. Так мы получаем уникальное имя для файла.
Цикл будет запускаться, только если используется уже используемое имя файла. Если это так, то значение переменной «now» увеличивается, и попытка повторяется.
Я также добавила вывод на экран значение переменной «upload_filename», чтобы после отправки мы могли видеть путь до файла и его уникальное имя.
На этом этапе добавьте в свой файл следующий код:
Итак, уникальное имя для файла мы сделали. А теперь нужно переместить его в нужную папку. Здесь нам поможет функция «move_uploaded_file». Добавьте следующий кусок кода в Ваш файл:
А теперь протестируйте отправку файла. Если все пройдет успешно, то на экране Вы увидите путь до Вашего файла, а в подготовленной для него папке должен появиться и он сам.
Если Вы получили сообщение об ошибке внимательно проверьте весь код.
6. Осталось только добавить путь к изображению в базу данных, чтобы Вы дальше могли использовать это изображение на своем ресурсе.
Я создала для этого примера отдельную таблицу базы данных «user_image» с двумя полями: поле для идентификатора («id») и поле для записи пути к изображению («picture» — тип varchar).
Исходя из всего этого вставить путь в таблицу базы данных мы можем вот так:
И если сейчас Вы заглянете в таблицу базы данных, то можете увидеть, что путь к изображению прекрасно туда вставился.
На этом буду заканчивать данный урок. Я надеюсь, что он Вам понравился и что у Вас все получилось. (Вы можете скачать исходные файлы, кликнув на иконку в начале статьи, однако, не забывайте, что многие данные Вам нужно будет поменять на свои).
Жду Ваших комментариев и не забывайте делиться этим уроком с Вашими друзьями с помощью кнопок социальных сетей.
Подписывайтесь на обновление блога, потому что в этом году будет много всего интересного.
Успехов Вам, хорошего настроения и бодрого начала года.
Загрузка картинок на сервер с использованием HTML5+jQuery+PHP
Доброго времени суток!
Наверняка многие видели в движке WP функцию переноса файлов с рабочего стола в окно браузера и их дальнейшую загрузку на сервер. Когда я увидел такое, мне стало интересно как же это организовано. Тогда я полез в дебри, чуть было не заблудился, но всё таки решение нашел. Оказывается все очень просто.
Что нам понадобится?
Ну что, поехали.
Для начала распишем работу нашего мини приложения.
1) Пользователь выбирает на своем ПК один или несколько файлов(в нашем случае графических файлов) и перетаскивает эти файлы в окно браузера который поддерживает Drag & Drop API(если точнее, то пользователь переносит файлы в специально отведенное место для загрузки).
2) После этого у нас срабатывает событие и при помощи API мы получаем информацию о загружаемых файлах и сохраняем их во временной памяти.
3)Далее, используя новый метод передачи sendAsBinary объекта XMLHttpRequest, посылаем наш файл из временной памяти на сервер.
Возможно, выше описанное не совсем понятно, но сейчас все всё поймут.
Велосипед изобретать не будем возьмем jQuery плагин FileDrop. Но так как велосипед мы не изобрели, есть один недостаток: данный плагин работает только в браузерах Firefox и Chrome. В этом нет ничего удивительного, ведь мы пишем приложение с использованием HTML5, а его поддерживают ещё не все основные браузеры. Но не будем на этом останавливаться идем далее.
Создаем файл index.html
С таким содержанием:
Идем далее..
Теперь создадим наш обработчик, в котором соединим действие плагина FileDrop и библиотеки jQuery, а так же создадим небольшие ограничения.
Ну а теперь, сверстаем наше приложение и оформим его создав файл styles.css(находится в архиве с исходниками)
На этом, мы заканчиваем с клиентской частью, и переходим к серверной.
Напишем небольшой php обработчик:
Вот, собственно, и всё! Теперь запускаем наш локальный сервер, открываем сайт ну и тестируем. Должно получиться примерно так:
1) Просто открытая страница браузера
2) Загрузка 1-го файла
3) Загрузка 2-го файла
4) Загрузка 6-ти файлов
На этом всё. Если мы проверим папку uploads, то в ней вы увидите все загруженные картинки.
Исходники тут
Демо версия тут
Спасибо за ваше внимание!
PS. Как цель, я не ставил перед собой задачу сделать полностью рабочее приложение для загрузки файлов на сервер и дальнейшего их просмотра. А хотел, всего лишь, продемонстрировать достаточно новый способ загрузки, который, как я думаю, многим был интересен.
PHP. Загрузка изображений на сервер
Итак, мы продолжаем обсуждать тему загрузки файлов на сервер. Если вы ещё не читали статью «Что необходимо учитывать при загрузке файлов на сервер», то рекомендую начать именно с неё.
В вышеуказанной статье мы обсудили общие нюансы загрузки файлов на сервер. А теперь пришло время программировать! В данном примере мы реализуем:
Предупреждаю сразу, рассматриваемый код будет без архитектурных изысков, поскольку он должен быть максимально понятным для начинающих.
Для начала определим, какие файлы и папки будут в нашем проекте:
Посмотрим на содержимое индекса.
Кода много, но, пожалуйста, не пугайтесь! Большая часть знакома вам из предыдущей статьи.
Соответственно, если форма была отправлена, мы сначала вызываем функцию can_upload. Если она подтвердила, что файл подходит нам по всем параметрам, то мы вызываем функцию make_upload. Иначе просто распечатываем сообщение об ошибке.
Здесь всё достаточно коротко и логично. Схема стандартная. Поэтому нас больше интересует, а что именно делают эти загадочные функции can_upload и make_upload!
Рассмотрим файл functions.php
Сначала всего пару слов про функцию make_upload, поскольку она проще. Обратите внимание на то, что мы перед именем файла вставляем mt_rand(0, 10000), т.е, случайное число от 0 до 10000. Делается это для того, чтобы у файла было уникальное имя. В противном случае, при загрузке двух картинок с одинаковыми именами, вторая заменит первую.
Кстати, если вы задались резонным вопросом, а где же закрывающий тег php в данном файле, значит, вы явно не читали статью «Ошибка headers already sent»!
Необходимые проверки
Основной же интерес для нас представляет функция can_upload.
Вот собственно говоря и всё! Скрипт надёжный, аккуратный и лаконичный.
А в следующей статье мы поговорим о том, как можно наложить на загружаемую картинку водяной знак. Рекомендую прочесть!