Как загрузить изображение на сервер php

Загрузка картинок на сервер с использованием 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

Сегодня загрузка файлов является практически неотъемлемым атрибутом современного web приложения. В данной статье речь пойдёт о том, как же загрузить файл(ы) на сервер с помощью PHP.

Настройка php.ini

Конфигурационный файл php.ini необходимо настраивать согласно бизнес-логики проекта! Например, мы планируем загружать не более десяти файлов до 2 Мбайт, а это значит нам понадобиться

Загрузка одного файла на сервер из формы

Для начала разберём механизм загрузки одной картинки на сервер. Для загрузки картинки с компьютера пользователя необходимо с помощью HTML-формы отправить нужный (выбранный) файл PHP-скрипту upload.php методом POST и указать способ кодирования данных enctype=»multipart/form-data» (в данном случае данные не кодируются и это значение применяется только для отправки бинарных файлов).

После отправки файла PHP-скрипту upload.php его можно перехватить с помощью суперглобальной переменной $_FILES с таким же именем, которая в массиве содержит информацию о файле (в нашем случае image ):

Не всем данным из $_FILES можно доверять: MIME-тип и размер файла можно подделать, т. к. они формируются из HTTP-ответа, а расширению в имени файла не стоит доверять в силу того, что за ним может скрываться совершенно другой файл. Тем не менее, дальше нам нужно проверить корректно ли загрузился наш файл и загрузился ли он вообще. Для этого необходимо проверить ошибки в $_FILES[‘image’][‘error’] и удостовериться, что файл загружен методом POST с помощью функции is_uploaded_file() . Если что-то идёт не по плану, значит выводим ошибку на экран:

Для того, чтобы «редиска» не загрузил вредоносный код, встроенный в изображение, нельзя доверять функции getimagesize() , которая также возвращает MIME-тип. Функция ожидает, что первый аргумент является ссылкой на корректный файл изображения. Определить настоящий MIME-тип картинки можно через расширение FileInfo . Код ниже проверит наличие ключевого слова image в типе нашего загружаемого файла и если его не окажется, выдаст ошибку:

Таким образом, при необходимости, делаем проверку и на другие MIME-типы. Например, для zip архивов проверка будет такая:

На данном этапе мы уже можем загружать абсолютно любые картинки на наш сервер, прошедшие проверку на MIME-тип, но для загрузки изображений по определённым характеристикам нам необходимо валидировать их с помощью функции getimagesize() , которой отдадим сам бинарный файл $_FILES[‘image’][‘tmp_name’] . В результате мы получим массив из элементов:

Для дальнейшей валидации изображения и работы над ним нам необходимо знать только 3 значения: ширину, высоту и размер файла (для вычисления размера применим функцию filesize() для бинарного файла из временной папки).

После всех проверок мы можем с уверенностью переместить наш загружаемый файл в какую-нибудь директорию с картинками. Делать лучше это через функцию move_uploaded_file(), которая работает в безопасном режиме. Перед перемещением файла нельзя забыть сгенерировать случайное имя и расширение из типа изображения для нашего файла. Вот так это выглядит:

Вместо простого способа генерации имени файла на основе MD5-хеша можно пойти более продвинутым путём, а именно написать отдельную функцию, которая будет проверять уникальность названия картинки для того, чтобы случайно не перезаписать уже загруженный файл. Если такого названия ещё нет, функция сгенерирует его. Такая проблема появляется в больших проектах и с большим количеством картинок. Но всё же)

Генерация имени для картинки теперь будет такой:

Мы реализовали простой, но в тоже время практичный (с точки зрения безопасности) механизм загрузки файла на сервер. Весь код целиком лежит здесь .

Загрузка нескольких файлов на сервер из формы

Разберём механизм загрузки нескольких изображений за один раз с локальной машины пользователя. Продолжим дальше работать с $_FILES . Наша новая HTML-форма будет немного отличаться от старой.

Как видно в конец имени поля выбора файла name=»images[]» добавились фигурные скобки и атрибут multiple , который разрешает браузеру выбрать несколько файлов. Все файлы снова загрузятся во временную папку, если не будет никаких ошибок в php.ini . Перехватить их можно в $_FILES , но на этот раз суперглобальная переменная будет иметь неудобную структуру для обработки данных в массиве. Решается эта задача небольшими манипуляциями с массивом:

Мы реализовали механизм загрузки нескольких файлов на сервер. Весь код целиком лежит здесь .

Загрузка файлов на сервер средствами PHP

Не пропусти свежие посты, подпишись:

Настройка параметров PHP

Для начала, нам потребуется настроить некоторые параметры php, для этого необходимо отредактировать конфигурационный файл php.ini. Если у вас нет доступа к этому файлу, обратитесь в техническую поддержку вашего хостинга. Я же использую локальный сервер OpenServer и для настройки php нужно перейти в раздел Дополнительно -> Конфигурация -> PHP (ваша версия PHP). Укажем следующие настройки:

Перезагружаем сервер, чтобы изменения вступили в силу. Можно приступать к коду.

Загрузка одного файла из веб-формы

Описываем на примере загрузки аватара в профиль пользователя на форуме. Чтобы форма имела какой-нибудь «приличный» вид, я подключил css bootstrap используя cdn.Сама форма максимально простая, выглядит так:

Файл profile.php который будет отвечать за обработку загружаемого изображения пока содержит следующий код:

Все передаваемые на сервер файлы попадают в так называемый «суперглобальный массив» $_FILES, приведённый выше код покажет нам его содержимое. Отправим тестовый файл, у меня это картинка формата jpg размером 100×100 пикселей. Получим следующее содержимое $_FILES:

Обратите внимание что все данные о загружаемом файле хранятся в виде ассоциативного массива, при этом ключ массива user_avatar равен значению атрибута name в форме загрузки файла. Сам файл при этом попадает во временную директорию на сервере tmp_name которую мы указывали в php.ini нашего сервере.

• UPLOAD_ERR_OK — Ошибок не возникло, файл был успешно загружен на сервер;
• UPLOAD_ERR_INI_SIZE — Размер принятого файла превысил максимально допустимый размер;
• UPLOAD_ERR_FORM_SIZE — Размер загружаемого файла превысил значение MAX_FILE_SIZE, указанное в HTML-форме;
• UPLOAD_ERR_PARTIAL — Загружаемый файл был получен только частично;
• UPLOAD_ERR_NO_FILE — Файл не был загружен;
• UPLOAD_ERR_NO_TMP_DIR — Отсутствует временная папка;
• UPLOAD_ERR_CANT_WRITE — Не удалось записать файл на диск;
• UPLOAD_ERR_EXTENSION — PHP-расширение остановило загрузку файла.

Давайте выполним ряд проверок загружаемого файла:

Здесь я проверяю что если код ошибки не равен UPLOAD_ERR_OK или функция is_uploaded_file() вернула false (т.е. файл был загружен не через HTTP POST а как-то иначе), то подготавливаем переменную $message и возвращаем JSON строку с ошибкой. Если всё ок, то выводится сообщение что ошибок нет, опять таки в виде JSON. Это сделано для того, чтобы более удобно взаимодействовать с фронт-частью нашего приложения.

Давайте сохраним файл в папку /img/ на нашем учебном сервере. Добавим следующий код в условие, где не возникло ошибок при загрузке:

А так же выведем список файлов в папке /img/:

Получаем такую картину

В случае успешной загрузки, в списке файлов справа появиться ссылка на загруженный файл. Давайте добавим дополнительную проверку на тип файла, например, нас интересуют только изображения.

Множественная загрузка файлов на сервер

Добавим ещё одну форму в наш код.

Обратите внимание на то, что в name поля загрузки файла появились квадратные скобки gallery[] а так же атрибут multiple. С такими параметрами вы сможете выбрать несколько файлов зажав кнопку Ctrl в окне просмотра файлов. Форма приобрела следующий вид.

Я так же добавил отдельный скрипт для обработки множественной загрузки gallery.php. В целом он имеет ту же структуру, однако файлы теперь обрабатываются в цикле из заранее подготовленного массива $arFiles.

А текущем варианте скрипта отсутствует ajax и всякий js способный улучшить пользовательский опыт. Полную версию скрипта я опишу в разделе bitrix этого сайта где буду делать простой компонент множественной ajax загрузки файлов на сервер.

Не пропусти свежие посты, подпишись:

Загрузка файлов на сервер в PHP

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

Первым делом, что нужно усвоить — это то, что сама HTML-форма, в которую подставляется файл должна быть не совсем обычной, вот пример HTML-кода такой формы:

<form action = «loading.php» method = «post» enctype = ‘multipart/form-data’>
<input type = «file» name = «somename» />
<input type = «submit» value = «Загрузить» />
</form>

Ключевой момент здесь — это атрибут «enctype» со значением «multipart/form-data«. Без него ничего работать не будет.

Теперь пишем скрипт «loading.php«, в котором мы ещё загружать файл не будем, а пройдёмся немного по различным важным моментам, которые надо обязательно учитывать, иначе может пострадать безопасность:

В результате, Вы увидите содержимое глобального двумерного массива $_FILES:

• name — имя загружаемого файла.
• type — MIME-type загружаемого файла. Это, пожалуй, самый важный параметр для обеспечения безопасности. И всегда при приёме файлов необходимо проверять MIME-type, иначе проблем не оберётесь. В следующей статье мы поговорим об этом более детально.
• tmp_name — физический путь к временному файлу. Именно в это место и помещается файл, а уже потом мы его переносим в другое место. Фактически, файл уже загружен, а нам лишь надо его переместить в нужную папку на сервере.
• error — код ошибки. Если 0, то ошибок нет.
• size — размер загружаемого файла. Вот это тоже частоиспользуемая опция, и её также надо проверять, чтобы ограничить размер загружаемых файлов. Безусловно, самим сервером этот размер ограничен, однако, для всяких картинок, этот размер явно завышен (как правило, он 10 МБ).

И все эти параметры присутствуют для каждого загружаемого файла (каждые из которых представляют собой массив в двумерном массиве $_FILES).

Теперь давайте уже закончим с загрузкой файлов на сервер в PHP, и для этого напишем такой код («loading.php«):

<?php
$uploadfile = «images/».$_FILES[‘somename’][‘name’];
move_uploaded_file($_FILES[‘somename’][‘tmp_name’], $uploadfile);
?>

То есть вначале мы задаём путь к загружаемому файлу на сервере. Здесь мы хотим поместить файл в директорию «images» с тем же именем, что и было раньше у файла. А функцией move_uploaded_file() мы перемещаем файл в выбранную нами директорию из его временного хранилища.

Однако, обратите внимание, это очень важно! Так использовать код ни в коем случае нельзя, иначе Вашему сайту будет угрожать серьёзная опасность! Фактически, на данный момент может быть загружено абсолютно всё, что угодно: любые исполняемые файлы, скрипты, HTML-страницы и другие весьма опасные вещи. Поэтому обязательно надо проверять загружаемые файлы на сервер очень тщательно. И вот этим мы и займёмся в следующей статье. Поскольку тема очень важная, то я советую Вам подписаться на обновления, чтобы не пропустить эту статью.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 62 ):

У меня этот скрипт не работает! Неделю голову ломал. PHP говорит, что одно значение лишнее. Убирал каждое по очереди: в двух синтаксическая ошибка, в другой — просто ничего.

Вот посмотри тут может яснее будет http://saitsozdanie.ru/php/php-zagruzka-fajlov-na-server.html

а что прописывается в пункте [somename] и [tmp_name]?? в [name] пишется имя файла, что на форме?

somename — это название поля с файлом в HTML-форме, а в tmp_name прописывается временный путь к файлу на сервере. Он генерируется самим PHP.

тоесть [tmp_name] оставляем пустым или так и писать [tmp_name]? (Выберите фоновый рисунок:<input type="file" name="path">) Здесь [somename]=path? а что пишется тогда в после [name]?

<input type="file" name="somename"> — вот так, tmp_name нужен для того, чтобы потом можно было скопировать файл из этого временного пути в уже какую-то папку на сайте.