необходимо заполнить поле uploaded file
Загрузка файлов на сервер
Что такое Upload files, или почему не работает
copy («c:\images\sample.jpg», «http://mysite.ru/uploads/sample.jpg «)
Что происходит, когда пользователь выбрал файл на своем диске, и нажал на кнопку «Send file»? Браузер отсылает файл на сервер, где php-интерпретатор помещает его в свою временную директорию, присваивая ему случайное имя и выполняет скрипт, указанный в поле action.
Как должен выглядеть upload.php?
Для работы с загруженными файлами лучше всего использовать встроенные функции is_uploaded_file() и move_uploaded_file(), которые проверяют, был ли загружен файл, и помещают его в указанную папку соответственно. Более детальную информацию Вы можете найти на страницах руководства. Не стоит изобретать велосипед и работать самому с временными файлами, копировать их, удалять. Это уже сделано до Вас и для Вас.
Настройка сервера
Я все сделал правильно, но у меня что-то не работает. Может, у меня неправильно сконфигурирован сервер?
Если Вы «все сделали правильно», но Ваш код неработает, или работает неправильно, не спешите отчаиваться. Возможно проблема не в Ваших руках, а в неверных настройках сервера. Вот список директив, которые имеют отношения к загрузке файлов:
Do not use Apache 2.0 and PHP in a production environment neither on Unix nor on Windows.
Небольшие пояснения, к этому рецепту: вышеописанная проблема, когда загруженные на сервер архивы не распаковываются и картинки не отображаются, может возникать из-за того, что используется веб-сервер Russian Apache. Директива CharsetDisable отключает модуль charset-processing module, т.е. никакой перекодировки при скачивании файлов, находящихся в данной папке, происходить не будет. Директива CharsetRecodeMultipartForms выключает перекодировку данных, переданных методом POST с заголовком Content-Type: multipart/form-data. Т.е. двоичные данные, переданные с такой настройкой, будут оставлены в первоначальном виде, а все остальное наполнение сайта будет перекодировано согласно текущим настройкам сервера.
Но при этом могут возникнуть осложнения: будьте готовы к тому, что в некоторых случаях текстовые части запросов вам придется перекодировать самостоятельно. Вот что по этому поводу говорится в документации:
Используйте директиву CharsetRecodeMultipartForms, которая появилась в PL23, но при этом вам все-равно придется перекодировать вручную текстовые части запросов. Для этого можно использовать Russian Apache API, доступное в других модулях или Russian Apache Perl API, доступное из mod_perl.
Один из примеров определения кодировки вы можете найти тут: http://tony2001.phpclub.net/detect_charset/detect.phps
Самая свежая документация по Russian Apache находится на его официальном сайте: http://apache.lexa.ru/.
Не забывайте, что после любой смены конфигурации, Вам необходимо перезапустить Ваш веб-сервер.
Дополнительные возможности
Загрузка нескольких файлов одновременно
Пример формы загрузки нескольких файлов:
И не забудьте увеличить post_max_size, если предполагается много файлов
Автоматическая загрузка файлов на сервер
Хранение файлов в базе данных mySQL
Помните, что скрипт отображающий ваш HTML никак не связан со скриптом, который должен выводить изображение. Это должны быть два различные приложения.
Хранение картинок в базе не является хорошем стилем. Гораздо удобней хранить в базе лишь пути к файлам изображений.
Получение свойств изображения.
Загрузка файлов, имеющих русско-язычное название
Отображения статуса загрузки (Progress bar)
Необходимо учитывать, что до полной загрузки файла, PHP не может оперировать ни размером файла, ни процентом его загрузки. Только когда файл уже находится на сервере PHP, то он получает возможность обращаться к информации. Если вам все-таки крайне необходимо реализовать такую возможность, воспользуйтесь Java-аплетом.
Права на файлы
Проблемы с правами на сервере (upload_tmp_dir)
В Unix-подобных операционных системах каждой папке, файлу, ссылке выставлены соответствие права доступа. Они могут выглядеть как rwx-rw-r- или же как число 754.
Доступность файла или каталога зависят от идентификатора пользователя и идентификатора группы, в которую он входит. Режим в целом описывается в терминах трех последовательностей, по три буквы в каждой:
r Право на чтение. (4)
w Право на запись. (2)
x Право на выполнение (поиск в каталоге). (1)
Пример реализации загрузки картинок на сервер.
Оригинал статьи находится на сайте PHP Club
FoggyK / Lesson_6PHP.md
Принципы загрузки фалов через форму
Функционал, отвечающий за отправку файлов на сервер, реализуется довольно просто. Как и в примерах из предыдущих уроков, за это отвечает специальное поле формы. Но ее настройка имеет некоторые особенности.
Если ваша форма содержит поля, отвечающие за загрузку файлов, то элементу
Использование поля загрузки файлов
При нажатии кнопки откроется проводник файловой системы. В нем можно перемещаться по директориям компьютера. Интерфейс интуитивно понятен любому пользователю. Все что нужно сделать — это найти нужный файл и нажать кнопку «Открыть». Отметим, что выбирать нужные документы и файлы может только сам пользователь. Явное указание атрибута value с именем или расположением какого-либо файла не приведет к успеху.
Чтобы выбранный файл был загружен при отправке формы, полю необходимо добавить атрибут name с уникальным значением.
Множественный выбор и блокировка поля
Принципы загрузки файлов
Загрузка файла на сервер может быть выполнена как с помощью веб-формы, расположенной на странице сайта, так и прямым программным запросом. Для PHP-интерпретатора способ передачи файла не имеет значения. Спецификация HTTP-протокола приводит эти операции к единообразному виду.
Перемещение загруженного файла
Как говорилось выше, загружаемые файлы размещаются во временной директории сервера и автоматически удаляются PHP-интерпретатором после выполнения текущего запроса. Их можно сохранить, переместив в другое место. Использовать стандартные функции copy() или rename() крайне нежелательно.
С помощью функции is_uploaded_file() вы можете проверить, является ли файл загруженным в текущем запросе. Она принимает всего один параметр — имя файла, а возвращает результат логического типа.
Важно
PHP позволяет изменять местоположение загруженных файлов с помощью обычных функций копирования или перемещения. Однако это довольно опасно. Существует ряд ухищрённых атак, основанных на таком недальновидном подходе.
Пример загрузки файла на сервер
Поле загрузки файлов, которое мы заслужили
Все течет, все меняется, но только input[type=file] как портил нервы всем начинающим веб-разработчикам, так и продолжает это делать до сих пор. Вспомните себя N лет назад, когда вы только начинали постигать азы создания веб-сайтов. Молодой и неопытный, вы искренне удивлялись, когда кнопка выбора файла напрочь отказывалась менять цвет своего фона на ваш любимый персиковый. Именно в тот момент вы впервые столкнулись с этим несокрушимым айсбергом под названием «Загрузка файлов», который и по сей день продолжает «топить» начинающих веб-разработчиков.
Разметка и первичные стили
Начнем с HTML-разметки:
Пожалуй, главным элементом, на который стоит обратить внимание, является
Вырисовывается план действий: стилизуем метку как нам угодно, а сам input[type=file] прячем с глаз долой. Для начала настроим общие стили страницы:
Теперь стилизуем нашу метку:
То, к чему мы стремимся ( input[type=file] убран из разметки): 
Безусловно, можно было отцентровать метку, добавить фон и границу, получив полноценную кнопку, но наш приоритет — Drag-and-Drop.
Прячем input
Поздравляю, мы добились того, чего хотели: наше поле выглядит именно так, как на предыдущей картинке.
Настраиваем фокус
В браузерах, основанных на движке WebKet (Google Chrome, Operа, Safari), свойство по умолчанию для элементов в фокусе имеет вид:
Открываем Google Chrome или Opera, смотрим. Все работает как надо:
Посмотрим, как обстоят дела с фокусом в Mozilla Firefox и Microsoft Edge. Для этих браузеров свойство по умолчанию имеет вид:
Добавляем стиль из Mozilla Firefox перед стилем для WebKit: сначала все браузеры применят первое свойство, а затем те, которые могут (Google Chrome, Opera, Safari и др.), применят второе.
Ну ничего, нормальные герои всегда идут в обход. Как я сказал ранее, событие focus случается, а значит, регулировать свойства мы можем прямиком из JavaScript. Но для этого нам придется поменять логику нашего селектора:
Теперь все работает как надо. Поздравляю, с фокусом мы разобрались.
Drag-and-Drop
Для начала определим Drag-and-Drop-элемент:
Теперь перейдем в JS-файл. Для начала, нам необходимо отменить все действия по умолчанию на события Drag-and-Drop. Например, одно из таких событий — открытие кинутого файла браузером. Нам это совершенно не нужно, поэтому пропишем следующие строчки:
Начнем описывать свой собственный обработчик событий. Поступим так же, как делали с фокусом, но на этот раз будем отслеживать события dragenter и dragover для добавления класса и событие dragleave для его удаления:
И опять нас ждет неприятный сюрприз: при движении по dropZone мышью с файлом поле начинает мерцать. Происходит это в Microsoft Edge и WebKit-браузерах. Кстати, большинство этих самых WebKit-браузеров в настоящее время работают на движке Blink (оценили иронию, а?). А вот в Mozilla ничего не мерцает. Видимо, решил исправиться после багов с фокусом.
И все, проблема решена! Вот так выглядит наше поле с файлом внутри:
Теперь проработаем способ загрузки через input[type=file] :
Отслеживаем событие change на кнопке выбора файлов, получаем массив через this.files и отправляем его в функцию.
Отправка файлов через AJAX
Последний этап — описание функции обработки файлов — уникален для всех и каждого. Он будет прямым образом зависеть от той цели, которую вы преследуете. Для примера я покажу, как отправлять файлы на сервер через AJAX.
Допустим, мы создаем поле для загрузки фотографий. Мы не хотим, чтобы к нам на сервер попало что-то другое, поэтому определимся с типами файлов: пусть это будут PNG и JPEG. Также стоит регламентировать максимальный размер одной фотографии, которую может отправить пользователь. Ограничимся пятью мегабайтами. Начнем описывать нашу функцию:
Теперь все готово для отправки файлов через AJAX. Добавим в нашу функцию следующие строчки:
Поздравляю, теперь вы умеете создавать свое собственное поле загрузки файлов! Конечно же, я не позиционирую свой способ как единственно верный и правильный. Своей задачей я ставил показать общий ход решения данной задачи, подходящий в первую очередь для новичков. Если вы считаете, что где-то что-то можно было сделать лучше — пишите в комментариях, обсудим!
Загрузка и обновление: поле file в HTML формах
Дата публикации: 2015-11-18
От автора: загрузка файлов на веб-страницах обрабатывается в поле input типа file. До недавнего времени у данного метода была одна серьезная проблема – загрузка не работала на мобильных устройствах.
С этого месяца загрузка файлов поддерживается в iOS9 и Android 5, что существенно облегчает жизнь. Со временем, вероятнее всего, встроенная поддержка загрузки файлов заменит специальные приложения. А значит настало время рассмотреть данный элемент повнимательнее.
Основы
Сам элемент проще некуда:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Конечно, сам по себе он не употребляется, необходима дополнительная разметка. Во-первых, чтобы полученные файлы можно было обработать и передать на сервер. И во-вторых, для доступности:
Как и input типа color и другие элементы формы, поле типа file будет использовать проводник операционной системы.
Ограничения
Можно накладывать ограничения на загружаемые файлы, указав поддерживаемые форматы с помощью MIME-типов в атрибуте accept с добавлением *:
Файлы, не совпадающие с критерием поиска (в примере выше – любые файлы кроме изображений), будут выделены серым цветом или будут скрыты. На данный момент в iOS поддерживается поиск файлов по маске, кроме отдельных форматов. Например, image/png. Также можно разрешить загрузку нескольких файлов за раз, добавив атрибут multiple:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
В iOS на данный момент не поддерживается загрузка нескольких форматов одновременно. Файлы можно загружать из определенных хранилищ: фото с камеры, фото из ленты, из онлайн хранилищ типа iCloud и DropBox.
Настройка
Input’ы типа file это обычные поля, в них нет ничего красивого, и их толком нельзя изменить с помощью CSS (хотя можно). Однако есть хитрый способ, как спрятать настоящий input и на его место поставить свой элемент, который будет работать абсолютно так же. Сперва, создадим файловый input и ниже кнопку button:
Результат можно посмотреть в начале оригинальной статьи: скрипт прячет настоящий файловый input, а сверху отображается элемент button; при клике на кнопку срабатывает событие нажатия на файловый input. А кнопку уже можно настроить как угодно с помощью CSS:
Только начало
Конечно, это только клиентская сторона: есть и другие способы, которые по-настоящему обрабатывают файлы от HTML5 API в JS до PHP. Сегодня мы рассмотрели самый простой способ; а в следующих статьях мы более подробно разберем загрузку файлов. Также существуют и другие способы взаимодействия с загрузкой файлов, среди них интерфейс drag-and-drop. О нем я расскажу в следующей статье.
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Битрикс создание формы с загрузкой файлов
Для того, чтобы создать форму с загрузкой файлов нужно:
1. Создание формы и подключение всех скриптов для валидации формы
Созданим папку /return/ и поместим туда все файлы с формой.
Файл index.php будет таким:
Скрипты и стили подключены через методы Битрикс. В форме с файлами будет сделана подмена стандартной кнопки (свой стили), чтобы кнопка была более презентабельной.
Далее необходимо создать файл со скриптом, script.js с содержимым кода.
Пояснения по файлам:для валидации форм используется jquery validate. Для телефона используется маска, jquery input mask.
Если форма не заполнена, то валидатор сообщит об этом:
2. Создать инфоблок со свойствами, создать почтовый шаблон
Далее переходим в админ панель Битрикс и создаем свойства: имя, телефон, фотография, копия. Будет 2 файла с картинками.
Переходим в Настройки-Почтовые и смс события-Типы событий в меню админки Битрикс. Или по адресу: /bitrix/admin/type_edit.php?lang=ru и создаем следующее содержание.
Создаем новое событие: FORM_RULES_RETURN с памятку с полями:
В почтовых шаблонах выбираем созданное событие FORM_RULES_RETURN и добавляем поля, которые есть в форме.
Сообщение почтового шаблона будет таким.
3. Создать скрипт php для проверки файлов, их загрузки, сохранением в инфоблок, отправки на почту уведомлений
Скрипт называется ajax_form.php и будет со следующим содержимым.
Здесь необходимо ввести номер информационного блока, чтобы все было корректно. В данном случае это 52 инфоблок.
Также нужно создать в корне папку для временного сохранения файлов картинок: tmp_img
Вначале происходит запись в инфоблок. Затем получение файлов из инфоблока. В письме уже создается мини-версия картинок(превью) и загруженные изображения. После отсылается email сообщение на указанный адрес в шаблон. Шаблонов писем может быть несколько и может быть разное содержание.
Файлы можно прикреплять как вложения, но здесь рассмотрен более простой вариант.
Дальше уже все проверять и тестировать.
Надеюсь статья была полезной, оставьте отзыв или мнение, что можно улучшить.