Полностью своя кнопка «Выбрать файл»

Изучая веб-программирование, я не нашел внятного решения проблемы оформления загрузки файла на сервер при помощи одной кастомной кнопки.

Предлагаю на суд сообщества свой велосипед. На написание данного текста вдохновил Способ №5 из материала Делаем красивый input[type=file] для адаптивного сайта… И да — все работает в IE, начиная с 9 версии.

Цель: создать свою кнопку/элемент управления по нажатию которой происходит загрузка файла на сервер (либо иные, предусмотренные разработчиком, файловые операции).
Инструменты: CSS, PHP, JavaScript.
Используемые технологии: Ajax, через скрытый iframe.

Преамбула

Из кода для упрощения сознательно выкинуты все процедуры проверки принятого файла и try-catch вызовов функций, так как эти моменты не являются темой данной статьи. Также не охватывается момент по предотвращению звукового сигнала в IE. В работе используем технологию Ajax, подразумевающую, что у нас есть основная страница, осуществляющая взаимодействие с пользователем(front-end) и скрипт на сервере, обрабатывающая наши запросы(back-end)

Технология работы

1. На главной странице создаем «form action» Делаем ей target на скрытый фрейм, который создаем статически (или динамически). Создаем два «input» с типом «file» и «submit», даем им «id», помещаем их в «div», который спрячем со страницы стилем. Все эти элементы не видимы для пользователя и не воспринимают каких-либо его действий.
2. Начинаем «магию». Для «input» с типом «file» на событие по изменению вешаем вызов функции onchange=«LoadFile();».
3. На главной странице создаем кнопку. Навешиваем ей на событие нажатия кнопки мыши вызов функции onclick=«FindFile();».
4. В функции FindFile() имитируем клик на «input» с типом «file». То есть при нажатии на нашу кнопку вызывается стандартный диалог выбора файла. Как только пользователь выбрал файл, срабатывает событие onchange и вызывается функция LoadFile(). В функции LoadFile() имитируем клик на «input» с типом «submit».
5. Форма формирует POST запрос с именем файла к нашему back-end скрипту, который осуществляет все проверки по безопасности и загрузку файла. После этого скрипт вызывает callback функцию главной страницы, которой сообщает о результате выполнения.

Собственно все. Для примера приведены четыре основных файла, код которых приведён ниже:

css/style.css – стили главной страницы
view/upload.php – back-end скрипт загрузки файла
index.php – главная страницы
js/upload.js – front-end скрипты главной страницы

Кроме того, необходим любой файл с картинкой для кнопки buttons/openfile.png

Загружаемые файлы помещаем в директорию ../temp/

Создаем стиль кнопки и скрытого «input».

Здесь все согласно примерам в интернете, валидация файлов изъята:

Источник

Работа с формами

Для передачи данных от пользователя Web-страницы на сервер используются HTML-формы. Для работы с формами в PHP предусмотрен ряд специальных средств.

Предварительно определенные переменные

В PHP существует ряд предварительно определенных переменных, которые не меняются при выполнении всех приложений в конкретной среде. Их также называют переменными окружения или переменными среды. Они отражают установки среды Web-сервера Apache, а также информацию о запросе данного браузера. Есть возможность получить значения URL, строки запроса и других элементов HTTP-запроса.

Пример 1

В результате на экране появится список всех глобальных переменных, включая переменные окружения. Наиболее часто используемые из них:

Переменная	Описание	Cодержание
$_SERVER[‘HTTP_USER_AGENT’]	Название и версия клиента	Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.93 Safari/537.36
$_SERVER[‘REMOTE_ADDR’]	IP-адрес	188.68.217.15
getenv(‘HTTP_X_FORWARDED_FOR’)	Внутренний IP-адрес клиента
$_SERVER[‘REQUEST_METHOD’]	Метод запроса ( GET или POST )	GET
$_SERVER[‘QUERY_STRING’]	При запросе GET закодированные данные, передаваемые вместе с URL
$_SERVER[‘REQUEST_URL’]	Полный адрес клиента, включая строку запроса
$_SERVER[‘HTTP_REFERER’]	Адрес страницы, с которой был сделан запрос	http://htmlweb.ru/
$_SERVER[‘PHP_SELF’]	Путь к выполняемой программе	/index.php
$_SERVER[‘SERVER_NAME’]	Домен	htmlweb.ru
$_SERVER[‘REQUEST_URI’]	Путь	/php/php_form.php

Обработка ввода пользователя

PHP-программу обработки ввода можно отделить от HTML-текста, содержащего формы ввода, а можно расположить на одной странице.

Пример 2

При обработки элемента с многозначным выбором для доступа ко всем выбранным значениям нужно к имени элемента добавить пару квадратных скобок. Для выбора нескольких эллементов следует удерживать клавишу Ctrl.

Источник

Кнопки

Кнопки являются одним из самых понятных и интуитивных элементов интерфейса. По их виду сразу становится понятно, что единственное действие, которое с ними можно производить — это нажимать на них. За счёт этой особенности кнопки часто применяются в формах, особенно при их отправке и очистке.

Рассмотрим вначале добавление кнопки через и его синтаксис.

Атрибуты кнопки перечислены в табл. 1.

Табл. 1. Атрибуты кнопок

Атрибут	Описание
name	Имя кнопки, предназначено для того, чтобы обработчик формы мог его идентифицировать.
value	Значение кнопки и одновременно надпись на ней.

Создание кнопки показано в примере 1.

Пример 1. Добавление кнопки

HTML5 IE Cr Op Sa Fx

Пробелы в надписи на кнопке, в отличие от текста HTML, учитываются, поэтому можно ставить любое количество пробелов, которые в итоге влияют на ширину кнопки. Результат примера показан на рис. 1.

» width=»372″ height=»195″ />

Рис. 2. Кнопки, созданные с помощью

Синтаксис создания такой кнопки следующий.

Пример 2. Рисунок на кнопке

HTML5 IE Cr Op Sa Fx

Кнопка Submit

Для отправки данных на сервер предназначена специальная кнопка Submit. Её вид ничем не отличается от обычных кнопок, но при нажатии на нее происходит выполнение серверной программы, указанной атрибутом action тега

Источник

Как вызвать PHP-функцию одним нажатием кнопки

Я новичок в PHP и только начал изучать основы этого языка.

Я создал страницу с именем functioncalling.php, который содержит две кнопки, Submit и Insert. Как новичок в PHP,я хочу проверить, какая функция выполняется при нажатии кнопки. Я хочу, чтобы выход пришел на той же странице. Поэтому я создал две функции, по одной для каждой кнопки. Исходный код для вызова функций.php выглядит следующим образом:

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

может ли кто-нибудь сказать мне, где именно я ошибаюсь? Ответы в самое ближайшее время будут высоко оценены. Заранее спасибо.

11 ответов:

в вашем php файле:

Да вам нужен ajax здесь. Пожалуйста, обратитесь к коду ниже для получения более подробной информации.

изменить разметку, как это

в ajax.php

вы должны вызвать кнопку на той же странице и в разделе PHP проверить, была ли нажата кнопка:

HTML:

вы не можете вызывать php-функции, такие как нажатие кнопки из HTML. потому что HTML находится на стороне клиента, а PHP работает на стороне сервера.

либо вам нужно использовать какой-то Ajax или сделать это, как в фрагменте кода ниже.

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

Источник

Как сделать кнопку в php

В основном для передаче параметров из форс используются методы POST и GET. Главное отличие методов POST и GET заключается в способе передачи информации. В методе GET параметры передаются через адресную строку (URL), т.е. в HTTP-заголовке запроса, в то время как в методе POST параметры передаются через тело HTTP-запроса и никак не отражаются в адресной строке.

Тег создает на веб-странице кнопки и по своему действию напоминает результат, получаемый с помощью тега (с параметром type=»button | reset | submit»). В отличие от этого тега, предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения. Используя стили можно определить вид кнопки путем изменения шрифта, цвета фона, размеров и других параметров.

Теоретически, тег должен располагаться внутри формы, устанавливаемой элементом

Параметр TYPE Определяет тип кнопки, который устанавливает ее поведение в форме. По внешнему виду кнопки разного типа никак не различаются, но у каждой такой кнопки свои функции. Значение по умолчанию: button.

1.1. Кнопка (input type=button)

1.2. Кнопка с изображением (input type=image)

Кнопки с изображениями аналогичны по действию кнопке Submit, но представляют собой рисунок. Для этого задаем type=image и src=»http://in-internet.narod.ru/teor/image.gif».

1.3. Кнопка отправки формы (input type=submit)

Служит для отправки формы сценарию. При создании кнопки для отправки формы необходимо указать 2 атрибута: type=»submit» и value=»Текст кнопки». Атрибут name необходим, если кнопка не одна, а несколько и все они созданы для разных операций, например кнопки «Сохранить», «Удалить», «Редактировать» и т.д. После нажатия на кнопку сценарию передается строка имя=текст кнопки.

РНР-сценарий не требуется.

1.4. Массив кнопок (submit) для выбора варианта действий

2. Кнопка сброса формы (Reset)

При нажатии на кнопку сброса (reset), все элементы формы будут установлены в то состояние, которое было задано в атрибутах по умолчанию, причем отправка формы не производиться.

РНР-сценарий не требуется.

3. Флажок (checkbox)

Флажки checkbox предлагают пользователю ряд вариантов, и разрешает произвольный выбор (ни одного, одного или нескольких из них).

4. Переключатель(radio)

Переключатели radio предлагают пользователю ряд вариантов, но разрешает выбрать только один из них.

5. Текстовое поле (text)

При создании обычного текстового поля размером size и максимальной допустимой длины maxlength символов, атрибут type принимает значение text. Если указан параметр value, то поле будет отображать указанный в переменной value. При создании поля не забывайте указывать имя поля, т.к. этот атрибут является обязательным.

6. Поле для ввода пароля (password)

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

7. Скрытое текстовое поле (hidden)

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

8. Выпадающий список (select)

Если необходимо создать выпадающий с предсказуемой последовательностью. Например, список с годами с 2000 по 2050. То используется следующий прием.

9. Многострочное поле ввода текста (textarea)

Существует параметр wrap – задание переноса строк. Возможные значения:

создает пустое поле шириной в 20 символов и состоящее из 2 строк.

Для того, чтобы в многострочном текстовом поле соблюдалось html-форматирование (перенос строк по средством тега
или
), то используйте функцию nl2br():

10. Кнопка для загрузки файлов (browse)

Служит для реализации загрузки файлов на сервер. При создании текстового поля также необходимо указать тип поля type как «file».

СПОСОБЫ ОБЩЕНИЯ БРАУЗЕРА С СЕРВЕРОМ

Метод GET

Но можно не использовать пары ключ=значение если надо передать всего одну переменную для этого надо после знака вопроса написать ЗНАЧЕНИЕ (не имя) переменной.

Преимущество передачи параметров таким способом заключается в том что клиенты которые не могут использовать метод POST (например, поисковые машины) все же смогут просто пройдя по ссылке передать параметры скрипту и получить содержимое.

Недостаток в том, что просто изменив параметры в адресной строке пользователь может повернуть ход сценария непредсказуемым образом, это создает огромную дыру в безопасности в сочетании с неопределенными переменными и register_globals on или кто-нибудь может узнать значение важной переменной (например ID-сеcсии) просто посмотрев на экран монитора.

Для чего следует использовать:

— для доступа к общедоступным страницам с передачей параметров (повышение функциональности)

— передача информации не влияющей на уровень безопасности

Для чего не следует использовать:

— для доступа к защищенным страницам с передачей параметров

— для передачи информации влияющей на уровень безопасности

— для передачи информации не подлежащей модифицированию пользователем (некоторые передают текст SQL-запросов.

Метод POST

Передать данные методом POST можно только с помощью формы на HTML странице. Основное отличие POST от GET в том, что данные передаются не в заголовке запроса а в теле, следовательно пользователь их не видит. Модифицировать может только изменив саму форму.

— большая безопасность и функциональность запросов с помощью форм методом POST.

Для чего следует использовать:

— для передачи большого объема информации (текст, файлы..);

— для передачи любой важной информации;

Для чего не следует использовать:

Загрузка файлов методом POST

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

Страница для загрузки файлов может быть реализована при помощи специальной формы, которая выглядит примерно так:

В приведенном выше примере «_URL_» необходимо заменить ссылкой на PHP-скрипт. Скрытое поле MAX_FILE_SIZE (значение необходимо указывать в байтах) должно предшествовать полю для выбора файла, и его значение является максимально допустимым размером принимаемого файла. Также следует убедиться, что в атрибутах формы вы указали enctype=»multipart/form-data», в противном случае загрузка файлов на сервер выполняться не будет.

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

Как определить метод запроса?

вернет GET или POST.

Какой способ следует применять?

• Если же в результате отправки формы данные записываются или изменяются на сервере, то следует их отправлять методом POST, причем обязательно после обработки формы надо перенаправить браузер методом GET. Так же, POST может понадобиться, если на сервер надо передать большой объём данных (у GET он сильно ограничен), а так же, если не следует «светить» передаваемые данные в адресной строке (при вводе логина и пароля, например).

В любом случае, после обработки POST надо всегда перенаправить браузер на какую-нибудь страницу, пусть ту же самую, но уже без данных формы, чтобы при обновлении страницы они не записывались повторно.

Как передать данные в другой файл непосредственно из тела PHP-программы методом GET и POST?

Пример, для демонстрации отправки данных методом POST и GET одновременно и получения ответа от сервера. В этом примере файл file.php получил переменные:

GET var=»23″ и var2=»54″
POST var3=»test» и var4=»еще тест»

Внимание, данные передаваемые через POST или GET всегда передаются строкой (string), независимо от того, через форму они передаются или через скрипт. Поэтому передавая число, помните, что в скрипт оно попадет как string.

Как перейти на другую страницу сайта из тела программы?

На новую страницу На предыдущую с обновлением:

Через генерацию JavaScript-кода:

На предыдущую с обновлением: На предыдущую без обновления: Перезагрузить текущую страницу:

На новую На предыдущую страницу с обновлением: На текущую страницу с обновлением и генерацией полного url-адреса:

ПРИМЕРЫ НЕОБЫЧНОГО ИСПОЛЬЗОВАНИЯ ФОРМ

Эти примеры показывают, что PHP-программу обработки ввода можно отделить от HTML-текста можно расположить на одной странице.

Пример 1. Задание номера карточки.

Здесь отсутствует кнопка передачи данных, т.к. форма, состоящая из одного поля, передается автоматически при нажатии клавиши Enter.

Пример 2. Навигация по массиву (списку) по средством формы.

В этом примере осуществляется перемещение по списку (массиву) элементов с отражением его номера (ключа) и значения элемента в массиве с помощью кнопок и скрытой строки с передачей навигационного параметра.

ПРОВЕРКА КОРРЕКТНОСТИ ДАННЫХ ИЛИ ДОПУСТИМОСТИ ВВОДИМЫХ ДАННЫХ

На любом современном сайте используются всевозможные HTML-формы, которые пользователь должен заполнить и отправить данные на сервер. Это может быть гостевая книга, форум, форма обратной связи, подписка на рассылку и т.д.

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

• Проверить, что поле, в которое заносится электронный адрес непустое (поскольку пользователь может просто забыть ввести адрес, и, если этот случай необработан, возникнет ошибочная ситуация);

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

Email обязательно должен содержать символ @, быть по длине не менее 8 символов, есть также регулярное выражение, по которому можно проверить данные на предмет соответствия адресу электронной почты.

Пусть есть страница form.php, на которой расположена наша форма, и есть файл send.php, который является обработчиком данных формы в файле form.php.

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

Пусть отправляется переменная email методом POST в файле send.php, то делаем:

1. Проверку на длину:

2. Проверку корректности адреса электронной почты

Также не забывайте, что электронный ящик может находиться на поддомене xxx@xxx.xxx.com, или даже на домене четвертого, пятого уровня (как вариант, реально эта ситуация крайне редка, но отбрасывать эти адреса не стоит). Поэтому в регулярном выражении не забывайте использовать точку (экранированную «\.«) для указания того, что часть адреса после «@» может содержать точку как разделитель доменных имен.

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

Объединяя эти шаги, получаем следующее регулярное выражение для проверки адресов электронной почты:

Проверка осуществляется по этому шаблону с применением функции preg_match():

Эта пользовательская функция check_email возвращает true, если переданное значение переменной $email соответствует шаблону и false в противном случае.

В итоге проверка на корректность будет выглядеть так:

Соответственно в файле form.php перед формой прописываем следующее:

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

ДРУГИЕ ПРОВЕРКИ НА КОРРЕКТНОСТЬ ВВЕДЕННЫХ ДАННЫХ

Каждый web-мастер должен уметь не только писать скрипты, но и грамотно организовывать защиту своих творений. Одним из важнейших навыков является умение правильно фильтровать всю информацию, поступающую от пользователя.

Кроме чистых ошибок пользователя, необходимо также исключить ситуации, в которых возможно злонамеренное введение некорректных данных, к примеру, различных скриптов. Для этого вводимый пользователем текст необходимо обработать функциями удаления HTML-тегов (для исключения возможности написания скриптов на JavaScript и Visual Basic) и обратных слешей (для исключения возможности написания скриптов на Perl). Т. о. минимальный набор действий, необходимый для проверки корректности данных, вводимых пользователем, включает следующие этапы:

• проверка того, что пользователь ввел данные

• проверка допустимости вводимых пользователем данных (как правило, осуществляется при помощи регулярных выражений)

• обработка текста, введенного пользователем функцией htmlspecialchars для удаления HTML-тегов

• обработка текста, введенного пользователем функцией stripslashes для удаления обратных слешей

ФИЛЬТРАЦИЯ ДАННЫХ

Вводимый пользователем текст необходимо обработать функциями удаления HTML-тегов (для исключения возможности написания скриптов на JavaScript и Visual Basic) и обратных слешей (для исключения возможности написания скриптов на Perl). К примеру, если переменная $login содержит текст с именем пользователя, то обработка этого текста выглядит так:

Если вы знакомы с регулярными выражениями, то предыдущий пример можно записать гораздо короче:

Этот фрагмент кода будет проверять введенный логин на соответствие регулярному выражению ‘/[0-9a-z_]/i‘, которое означает: все цифры + все латинские буквы в любом регистре + знак подчеркивания. Если логин содержит другие символы, то будет показано сообщение об ошибке.

Аналогично фильтруются переменные, получаемые скриптом через URL. В движках сайтов можно встретить что-то вроде таких ссылок:

Если не фильтровать переменную $module (или $_GET[`module`], если register_globals отключен), то над сайтом могут вытворяться не очень хорошие вещи, вроде XSS. Нужно применять первый приведенный мной скрипт-чистильщик, разумеется, убрав сообщения об ошибках.

ПРОВЕРКА НА ПУСТОТУ ПОЛЯ

Проверка того, что пользователь ввел данные, может осуществляться, к примеру, с помощью функции isset: Для этой же цели можно использовать функцию empty:

На практике удобно сначала проверить, не пустой ли action формы, а потом уже проверять различные его составляющие: поле имя, e-mail и т. д. К примеру:

ТАБЛИЦА СРАВНЕНИЯ ТИПОВ В PHP

Следующая таблица демонстрируют работу PHP с типами переменных и операторами сравнения, как в случае свободного, так и в случае строгого сравнения. Также эта информация относится к разделу документации по приведению типов.

Замечание: HTML-формы не передают тип переменной: они всегда передают строки. Для проверки является ли строка числом, используйте функцию is_numeric().

Замечание: Использование if ($x) пока $x не определена сгенерирует ошибку E_NOTICE. Вместо этого используйте функцию empty() или isset() и/или инициализируйте переменную.

Источник