Создание PHP-скрипта для загрузки файлов
Когда пользователь взаимодействует с формой, файл загружается во временную папку. При этом вся информация о файле хранится в многомерном массиве $_FILES. Индексом ключа этого массива является атрибут name поля <input type = » file ‘name = «image»>.
В нашем случае именем индекса является $_FILES . Более подробная информация о загружаемом файле хранится в следующих индексах.
<?php $img=$_FILESstores the original filename from the client $tmp=$_FILESstores the name of the designated temporary file $errorimg=$_FILESstores any error code resulting from the transfer ?>
После того, как файл загружен во временную папку, и вся его информация сохранена в массиве, вызывается функция move_uploaded_file(). Она предназначена для перемещения файла из текущего временного местоположения в постоянную директорию. Процесс загрузки файла можно описать следующим образом:
1. Проверяем, возникли ли ошибки при загрузке.
2. Проверяем, разрешен ли тип загружаемого файла.
3. Проверяем, что загружаемый файл имеет допустимый размер.
4. Проверяем, является ли имя загружаемого файла корректным (если имя файла содержит /, это повлияет на путь сохранения).
5. Проверяем, что загружаемый файл еще не существует.
6. Загружаем файл.
Напишем PHP-скрипт для работы с функциями загрузки файлов. Создайте файл ajaxupload.php и добавьте в него приведенный ниже код.
<?php
$valid_extensions=array('jpeg','jpg','png','gif','bmp','pdf','doc','ppt');// valid extensions
$path='uploads/';// upload directory
if(!empty($_POST)||!empty($_POST)||$_FILES)
{
$img=$_FILES;
$tmp=$_FILES;
// получаемрасширениезагруженногофайла
$ext=strtolower(pathinfo($img,PATHINFO_EXTENSION));
// можем загрузить и изображение с помощью функции rand
$final_image=rand(1000,1000000).$img;
// проверяемформат
if(in_array($ext,$valid_extensions))
{
$path=$path.strtolower($final_image);
if(move_uploaded_file($tmp,$path))
{
echo"<img src='$path' />";
$name=$_POST;
$email=$_POST;
//включаем файл конфигурации базы данных
include_once'db.php';
//вставляем данные формы в базу данных
$insert=$db->query("INSERT uploading (name,email,file_name) VALUES ('".$name."','".$email."','".$path."')");
//выводим $insert?'ok':'err';
}
}
else
{
echo'invalid';
}
}
?>
Теперь, когда все проверки выполнены, перемещаем загруженный файл из папки tmp в папку upload. Для этого создайте ее в каталоге проекта. В папку upload будут сохраняться загруженные изображения. pathinfo() — это встроенная функция, которая возвращает имя файла и расширение.
Отправка HTTP-заголовков
Метод позволяет указывать заголовки HTTP-запроса. Для этого используется параметр .
В этом примере на сервер отправляется значение, хранящееся в поле ввода текста с .
$(document).ready(function () {
$("#btnSend").on('click', function (){
$.ajax({
url: 'header.php',
type: 'post',
dataType: 'html',
headers: {'x-my-header': $('#header').val()},
success: function(data){
$('#target').html(data);
}
});
});
});
Значение передается в заголовке , и в файле на сервере к нему можно обратиться так:
$_SERVER;
Символы переводятся в верхний регистр, и к имени добавляется префикс «».
5 последних уроков рубрики «jQuery»
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
jQuery плагин для создания временной шкалы.
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
jQuery плагин для создания диаграммы Ганта.
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.
Здравствуйте, уважаемые читатели блога LifeExample, наконец-то меня посетило вдохновение и я готов порадовать вас новым, большим и полезным материалом для начинающих web-мастеров. В этой статье речь пойдет о золотой технологии AJAX и примерах скриптов, написанных на её основе.
Сегодня я сделаю упор на работу с XML данными, т.к. пытаясь разобраться с технологией AJAX, мне попадались лишь примеры работы с JSON форматом. О работе с ним читайте в продолжении к данному материалу, которое скоро будет подготовлено и опубликовано.
Предупреждаю! Эта публикация будет очень объемной, поэтому запаситесь терпением и приготовьтесь внимать смыслу рассматриваемых в ней примеров:
- Технология AJAX пример №1 — наипростейший пример, для ознакомления с азами AJAX.
- Технология AJAX пример №2 — отправка данных на сервер средствами AJAX.
- Технология AJAX пример №3 — отправка структуры данных с сервера в виде XML и работа с ними на стороне клиента.
Совместив все эти AJAX примеры воедино, мы получим реализацию обмена данными по AJAX технологии с форматом XML.
Давайте приступим к большой и трудоемкой работе. Но сначала ознакомьтесь с небольшим введением.
Что такое AJAX ? Пример реализации.
AJAX, или, более длинно, Asynchronous Javascript And Xml — технология для взаимодействия с сервером без перезагрузки страниц.
За счет этого уменьшается время отклика и веб-приложение по интерактивности больше напоминает десктоп.
Например, при нажатии кнопки голосовать — из браузера на сервер будет отправлено сообщение, а сервер ответит браузеру, что голос принят.
Здесь будет ответ сервера
Технология AJAX, как указывает первая буква A в ее названии — асинхронна, т.е браузер, отослав запрос, может делать что угодно, например, показать сообщение
об ожидании ответа, прокручивать страницу, и т.п.
Вот код кнопки в примере выше:
<input value="Голосовать!" onclick="vote()" type="button" />
При нажатии она вызывает функцию , которая отправляет запрос на сервер, ждет ответа, а затем показывает сообщение об этом в ‘е под кнопкой:
<div id="vote_status">Здесь будет ответ сервера</div>
Далее мы разберем, как она работает, более подробно.
Для обмена данными с сервером используется специальный объект , который умеет отправлять запрос и получать ответ с сервера. Кроссбраузерно создать такой объект можно, например, так:
function getXmlHttp(){
var xmlhttp;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
Более подробно о деталях реализации AJAX с использованием XmlHttpRequest и других транспортов можно почитать в разделе про общение с сервером.
Здесь мы не будем на этом останавливаться и перейдем сразу к функции :
// javascript-код голосования из примера
function vote() {
// (1) создать объект для запроса к серверу
var req = getXmlHttp()
// (2)
// span рядом с кнопкой
// в нем будем отображать ход выполнения
var statusElem = document.getElementById('vote_status')
req.onreadystatechange = function() {
// onreadystatechange активируется при получении ответа сервера
if (req.readyState == 4) {
// если запрос закончил выполняться
statusElem.innerHTML = req.statusText // показать статус (Not Found, ОК..)
if(req.status == 200) {
// если статус 200 (ОК) - выдать ответ пользователю
alert("Ответ сервера: "+req.responseText);
}
// тут можно добавить else с обработкой ошибок запроса
}
}
// (3) задать адрес подключения
req.open('GET', '/ajax_intro/vote.php', true);
// объект запроса подготовлен: указан адрес и создана функция onreadystatechange
// для обработки ответа сервера
// (4)
req.send(null); // отослать запрос
// (5)
statusElem.innerHTML = 'Ожидаю ответа сервера...'
}
Поток выполнения, использованный vote, довольно типичен и выглядит так:
- Функция создает объект
- назначает обработчик ответа сервера
- открывает соединение
- отправляет запрос вызовом (ответ сервера принимается срабатывающей в асинхронном режиме функцией )
- показывает посетителю индикатор состояния процесса
Серверный обработчик, к которому обращен AJAX-запрос (в примере это vote.php) по сути ничем не отличается от обычной страницы. AJAX-запрос, отправляемый , ничем не отличается от обычного запроса.
Просто текст, который возвращает сервер, не показывается как HTML, а читается и обрабатывается функцией .
Пример: vote.php для примера с голосованием
<?php sleep(3); echo 'Ваш голос принят!';
Технология AJAX использует комбинацию:
- (X)HTML, CSS для подачи и стилизации информации
- DOM-модель, операции над которой производятся javascript на стороне клиента, чтобы обеспечить динамическое отображение и взаимодействие с информацией
- XMLHttpRequest для асинхронного обмена данными с веб-сервером. В некоторых AJAX-фреймворках и в некоторых ситуациях, вместо XMLHttpRequest используется IFrame, SCRIPT-тег или другой аналогичный .
- JSON часто используется для обмена данными, однако любой формат подойдет, включая форматированный HTML, текст, XML и даже какой-нибудь EBML
Типичное AJAX-приложение состоит как минимум из двух частей.
Первая выполняется в браузере и написана, как правило, на JavaScript, а вторая — находится на сервере и написана, например, на Ruby, Java или PHP .
Между этими двумя частями происходит обмен данными через XMLHttpRequest(или другой транспорт).
Пример. Gmail.
Раз уж взялись за Google — рассмотрим почтовый сервис той же компании, http://gmail.com.
На момент его появления он явился единственным открытым почтовым сервисом, использующим AJAX для следующих фич.
- Проверка ошибок ввода формы ДО сабмита
На сервер передается имя пользователя, результат проверки возвращается на страницу. - «Мгновенная» загрузка
Браузер обращается к серверу только за данными, а не обновляет весь громоздкий интерфейс - Автоматическая «доставка» писем в открытую папку
Время от времени отправляется запрос на сервер и, если пришли новые письма, они появляются в браузере. - Автодополнение
Достаточно ввести первые буквы имени адресата, и остальные дополняются автоматически, как в десктоп-приложениях.
Результат: обширная популярность, высокий спрос на account’ы с момента открытия.
Пример использования метода $.get()
Здесь приводится пример создания запроса AJAX с помощью метода и простая обработка ответа. Для работы примера нужно на сервере создать простой текстовый файл с именем , содержащий следующий текст:
{
"city": "Васюки",
"date": "18 марта 2012",
"forecast": "Зубодробительный холод и слякоть",
"maxTemp": +1
}
Данный файл будет имитировать ответ в формате JSON, который мог быть сформирован скриптом прогноза погоды на сервере.
Затем создаем страницу в той же папке что и :
<!doctype html>
<html lang="ru">
<head>
<title>Прогноз погоды</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$( function() {
$('#getForecast').click( function() {
var data = { city: "Васюки", date: "20120318" };
$.get( "getForecast.txt", data, success, "json" );
} );
function success( forecastData ) {
var forecast = forecastData.city + " прогноз на " + forecastData.date;
forecast += ": " + forecastData.forecast + ". Максимальная температура: " + forecastData.maxTemp + "C";
alert( forecast );
}
} );
</script>
</head>
<body>
<button id="getForecast">Получить прогноз погоды</button>
</body>
</html>
Открываем в браузере и нажимаем кнопку «Получить прогноз погоды». В окне сообщения получим прогноз погоды с нашего сервера.
Вот как работает данный код:
- содержит элемент «Получить прогноз погоды» с ID .
- JavaScript вверху страницы выполняется как только страница будет загружена и DOM окажется в состоянии готовности.
- Код JavaScript сначала привязывает обработчик события к кнопке . Данный обработчик выполняет AJAX запрос GET к , передавая название города и дату для прогноза. Также определяется возвратная функция которая будет выполняться по завершению запроса. Формат возвращаемых сервером данных определяется как JSON.
- Файл возвращает браузеру данные прогноза в формате JSON.
- Вызывается функция . jQuery разбирает данные JSON, полученные от , конвертирует их в объект JavaScript, и передает их в функцию.
- Функция возвращает объект данных и выводит сообщение, которое содержит несколько свойств объекта, включая название города, прогноз и температуру.
Простой пример в несколько строк демонстрирует работу запроса AJAX с использованием метода .
Создание формы для загрузки файла (изображения)
Начнем с простого. Для начала разберёмся как загрузить на сервер один файл.
Например, мы хотим загрузить какое-то изображение в одном из форматов jpg или png.
Создаем файл index.php. Добавляем в него базовую структуру HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Как загрузить файл на сервер</title>
</head>
<body>
</body>
</html>
Теперь, создаем CSS файл styles.css и подключаем его к странице.
Также подключим через CDN CSS фреймворк Bootstrap
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Как загрузить файл на сервер</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<!-- Bootstrap CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Теперь, создаем HTML форму. Для красоты, оформляем страницу с помощью классов CSS фреймворка Bootstrap.
Поле для загрузки изображения будет иметь имя file_img. Данное имя будет использоваться в названии ячейки из суперглобального массива $_FILES, которая будет содержать массив с данными о загруженном файле.
Также сделаем поле обязательной к заполнению, чтобы не было возможность отправить на сервер пустую форму.
Так как мы хотим, чтобы пользователь загружал только изображения в формате jpg или png, то необходимо сообщит пользователю об этом.
В тоже время, мы должны сообщить пользователю максимальный размер изображения, который доступен для загрузки.
Допустим, мы не хотим, чтобы пользователь смог загружать на сервер изображение, размер которого превышает 3 мегабайт.
Поэтому, мы должны вывести на страницу еще одно сообщение, которое предупреждает и о размере.
Сразу после тега <form>, добавляем соответствующие сообщения.
В итоге страница имеет такой код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Как загрузить файл на сервер</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="container">
<div class="row mb-3">
<div class="col-md-12">
<form action="upload-one-file.php" method="POST" enctype="multipart/form-data" class="form-inline md-form">
<p class="text-info">Разрешается к загрузки только изображения в формате jpg или png</p>
<p class="text-info">Максимальный размер загружаемого файла, не должно превысить 3MB</p>
<div class="input-group">
<div class="custom-file">
<input type="file" name="file_img" id="file_img" required>
</div>
</div>
<button type="submit" name="upload_image" class="btn btn-primary">Загрузить изображение</button>
</form>
</div>
</div>
</div>
<!-- Bootstrap CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Для того чтобы разместить форму по центру страницы, в файле styles.css добавляем эти стили:
.container{
padding-top: 200px;
}
form{
width: 550px;
margin: 0 auto;
}
Страница приобрела такой внешний вид:
Как создать или вставить данные с помощью jQuery AJAX?
5.1 Обработчик нажатия кнопки «Создать товар»
Откройте в папке products файл create-product.js
Следующий код будет обрабатывать нажатие кнопки. Эта кнопка должна иметь класс create-product-button.
5.2 Получение списка категорий из API
Нам нужно получить список категорий из API, потому что мы создадим поле выбора (select) «категории». Здесь пользователь сможет выбрать категорию продукта.
Замените // здесь будет вызов API категорий следующим кодом.
5.3 Создание кнопки выбора категории
Здесь мы создадим тег select с опцией «Categories».
Поместите следующий код после открывающей фигурной скобки предыдущего раздела.
5.4 Добавление кнопки «Все товары»
Кнопка «Все товары» необходима, чтобы мы могли вернуться к списку товаров.
Поместите следующий код после кода предыдущего раздела.
5.5 Создание HTML-формы «Создание товара»
Теперь мы создадим HTML-форму «Создание товара». Здесь пользователь может ввести информацию о новом продукте, которая будет отправлена на сервер.
Поместите следующий код после кода предыдущего раздела.
5.6 Показать форму «Создание товара» и изменить заголовок страницы
Мы должны сделать так, чтобы кнопка и форма появлялись на нашей веб-странице. Также изменим заголовок страницы.
Добавьте следующий код после кода предыдущего раздела.
5.7 Обработчик кнопки «Создать товар», получение данных формы и отправка данных на сервер
Если форма «Создание товара» отправлена, нам нужен скрипт для ее обработки.
Замените комментарий // здесь будет обработчик «создать форму товара» следующим кодом.
Использование jQuery и AJAX для загрузки файлов
Для отправки данных и загрузки файлов будет использоваться jQuery и AJAX. Поэтому я начну с подключения библиотеки jQuery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
$(document).ready(function(e){
$("#form").on('submit',(function(e){
e.preventDefault();
$.ajax({
url:"ajaxupload.php",
type:"POST",
data: newFormData(this),
contentType:false,
cache:false,
processData:false,
beforeSend:function()
{
//$("#preview").fadeOut();
$("#err").fadeOut();
},
success:function(data)
{
if(data=='invalid')
{
// неверный формат файла.
$("#err").html("Invalid File !").fadeIn();
}
else
{
// просмотрзагруженногофайла.
$("#preview").html(data).fadeIn();
$("#form").reset();
}
},
error:function(e)
{
$("#err").html(e).fadeIn();
}
});
}));
});
В приведенном выше коде метод $ajax() используется для отправки данных.
Javascript
$(«#photoimg»).live(‘change’,function(){}) — photoimg содержит ID название файла и $(‘#imageform’).ajaxForm() — imageform ID самой формы. Загруженные изображения будут отображены в блоке с id #preview.
<script type="text/javascript" src="https://ajax.googleapis.com/
ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.wallform.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#photoimg').live('change', function() {
var A=$("#imageloadstatus");
var B=$("#imageloadbutton");
$("#imageform").ajaxForm({target: '#preview',
beforeSubmit:function(){
A.show();
B.hide();
},
success:function(){
A.hide();
B.show();
},
error:function(){
A.hide();
B.show();
}
}).submit();
});
});
</script>
В данном листинге отображаются и скрываются блоки #imageloadstatus и #imageloadbutton, содержащие статусы загрузки изображений.
jQuery — функция post
Функция post предназначена для загрузки данных с сервера посредством HTTP POST запроса.
Синтаксис функции :
$.post(url ); // назначение параметров url, data, success, dataType аналогичны тем, которые приведены в описании функции get // 2 способ передачи параметров функции post (в формате объекта) $.post();
Применение ничем не отличается от использования jQuery-функции . Единственное отличие между ними — это метод, с помощью которого они отправляют данные на сервер. Функция отправляет данные в составе тела запроса (метод POST), а — в составе URL (метод GET).
Примеры c использованием функции post
1. Пример, в котором пользователю предложим угадать наш цвет. Для этого ему на выбор предоставим несколько цветов с помощью радиокнопок и кнопку «Угадать». Отправку выбранного цвета на сервер будем осуществлять посредством функции jQuery . На сервере осуществлять сравнивание «нашего цвета» и цвета, который выбрал пользователь, будем с помощью условия. В зависимости от того равны ли названия цветов, будем возвращать в качестве ответа значение или . На клиенте (в браузере) после получения ответа от сервера и в зависимости от его результата, будем выполнять те или иные действия. А именно, при получении ответа , будем скрывать элементы управления, и выводить сообщение: «Да, вы угадали наш цвет!». В противном случае будем просто выводить текст: «Нет, наш цвет другой!».
<div id="guess-color">
<p>Угадайте наш любимый цвет:</p>
<div>
<input type="radio" name="color" value="orange">Оранжевый<br>
<input type="radio" name="color" value="red">Красный<br>
<input type="radio" name="color" value="green">Зелёный<br>
<input type="radio" name="color" value="blue">Синий<br>
<button id="guess" type="button">Угадать</button>
</div>
<p id="result" style="color: firebrick"></p>
</div>
...
<!-- После подключения библиотеки jQuery -->
<script>
// после загрузки
$(function () {
// при нажатии на кнопку
$('#guess').click(function () {
// в переменную color запишем выбранный цвет
// в переменную result элемент, имеющий id="result"
var color = $('input:checked').val(),
result = $('#result');
// очистим содержимое элемента, имеющего id="result"
result.empty();
// если пользователь не выбрал цвет, то выведем соответствующее сообщение
if (color === undefined) {
result.text('Вы не выбрали цвет!');
return;
}
// ajax-запрос с помощью jQuery-функции post
// url - адрес запроса
// data - отправляемые на сервер данные
// done - Promise метод, с помощью которого будем осуществлять обработку успешнего ответа от сервера
$.post({
url: 'guess-color.php',
data: {'color': color}
}).done(function (data) {
if (data === 'success') {
$('#guess-color *').not('#result').hide();
result.text('Да, вы угадали наш цвет!');
} else {
result.text('Нет, наш цвет другой!');
}
});
});
});
</script>
Содержимое файла :
<?php
// переменная, значение которой будем возвращать клиенту
$output = 'error';
// наш цвет
$ourColor = 'green';
// цвет, который выбрал пользователь
$color = $_POST;
// запишем в переменную output строку success, если пользователь угадал цвет
if ($color == $ourColor) {
$output = 'success';
}
// выводим ответ
echo $output;
2. Пример, в котором реализуем систему приветствия пользователя. Пока пользователь не введёт своё имя, будем приветствовать его как гостя. Определять имеет ли текущий пользователь имя, а также его отправку на сервер будем через AJAX (jQuery функцию ). На стороне сервера сохранять имя пользователя будем посредством ссесий.
<div id="user">
<p id="userinfo">Привет, <span id="username" style="font-weight: bold"></span>.</p>
<input type="text" name="name" title="Имя пользователя">
<input type="button" name="send" value="Отправить">
</div>
...
<!-- После подключения библиотеки jQuery -->
<script>
// после загрузки
$(function () {
// функция для получения имени пользователя с помощью AJAX,
// а также для отправки значения поля input с name="name"
var getUserName = function(){
// получаем имя пользователя из поля input
var user = $('input').val();
// выполняем ajax-запрос на сервер
$.post({
url: 'username.php', // адрес зароса
data: {username: user}, // отправляемые данные на сервер
success: function (data) { // обработка данных при успешном ответе сервера
$('#username').text(data); // добавляем в элемент (id="username") имя пользователя
if (data!=='гость') { // скрываем элементы input, если пользователь не гость
$('#user input').hide();
}
}
});
};
// выполнить функцию getUserName
getUserName();
// при нажатию на кнопку "Отправить"
$('input').click(function(){
// выполнить функцию getUserName
getUserName();
});
});
</script>
Содержимое файла :
Как определить, что значение post_max_size было превышено?
Теперь, если мы по пытаемся загрузить данные методом POST, размер которых превышает значение 20MB (это значение указано в настройках сервера, в параметре post_max_size ), то, согласно документации, в таком случае в суперглобальных массивах $_POST и $_FILES не записываются данные.
В результате мы увидим ошибку о том, что, нет данных для обработки.
Для того чтобы убедиться в этом, временно, выведем на экран содержимое суперглобальных массивов $_POST и $_FILES внутри первой проверки.
if(!isset($_POST)){
echo 'Содержимое массива $_POST: <pre>';
print_r($_POST);
echo '</pre>';
echo 'Содержимое массива $_FILES: <pre>';
print_r($_FILES);
echo '</pre>';
exit("<p><strong>Ошибка!</strong> Вы зашли в обработчик формы напрямую, поэтому нет данных для обработки.</p><p> Вы можете перейти на <a href=".$address_site."> главную страницу сайта </a> </p>");
}
Для примера, попытаемся загрузить файл методом POST, размер которого превышает значение 20MB.
Загрузка большого файла методом POST
И в результате видим что суперглобальные массивы $_POST и $_FILES пустые.
Массивы $_POST и $_FILES могут быть пустыми в двух случаях:
- Пользователь зашел через браузерную строку напрямую в обработчик
- Пользователь отправил методом POST данные, размер которых превышает значение, указанное в параметре post_max_size
Согласно документации, мы можем определить, почему массивы $_POST и $_FILES пустые, следующим образом:
В конце значения атрибута action формы, необходимо прикрепить некий параметр, который будет выступать в качестве флага. Этот параметр будет передаваться на сервер методом GET.
<form action="upload-one-file.php?flag=1" method="POST" enctype="multipart/form-data" class="form-inline md-form">
Соответственно, на стороне сервера, внутри проверки существования ячейки ‘upload_image’ в массиве $_POST, мы можем сделать проверку.
Если в суперглобальном массиве $_GET, существует параметр ‘flag‘, значит пользователь попытался загрузить слишком большой файл, иначе, он зашел в обработчик напрямую.
Так как мы научились, вывести сообщения после отправки формы, то сообщения из проверки существования ячейки ‘upload_image‘ в массиве $_POST, также выведем на страницу с помощью сессий.
Меняем содержимое блока
<?php
if(!isset($_POST)){}
?>
таким образом:
<?php
if(!isset($_POST)){
if(isset($_GET)){
// Сохраняем в сессию сообщение об ошибке.
$_SESSION = "<p class='text-danger font-weight-bold'>Ошибка! Размер загруженного изображения превышает 3MB </p>";
}else{
// Сохраняем в сессию сообщение об ошибке.
$_SESSION = "<p class='text-danger font-weight-bold'>Ошибка! Вы зашли в обработчик формы напрямую, поэтому нет данных для обработки. </p>";
}
//Возвращаем пользователя обратно на страницу загрузки изображения
header("Location: ".$address_site);
exit();
}
?>
Теперь, если пользователь пытается загрузить на сервер файл, размер которого превышает значение, указанное в параметре post_max_size, то в результате он увидит ошибку о том, что, размер загруженного файла превышает 3MB.
Иначе, если пользователь зашел в обработчик напрямую, то в результате он увидит сообщение о том, что нет данных для обработки.
Ссылка на обработчик формы, это: http://kak-zagruzit-fajly-na-server.local/upload-one-file.php
Пользователь пытается перейти напрямую в обработчик по указанной ссылке, но в результате увидит ошибку.
Ошибка в результате перехода в обработчик напрямую
А также пользователь может перейти напрямую в обработчик, передав параметр ‘flag’: http://kak-zagruzit-fajly-na-server.local/upload-one-file.php?flag
Для того чтобы вывести соответствующие сообщение о том, что нет данных для обработки, необходимо определить, как пользователь зашел в обработчик. Он отправил форму или зашел напрямую.
Для этого нам поможет ячейка HTTP_REFERER из суперглобального массива $_SERVER.
Данная ячейка содержит информацию откуда пришел пользователь.
Если пользователь перешел в обработчик напрямую, то ячейка HTTP_REFERER, будет пустой, иначе в ней будет содержится адрес страницы с формой загрузки файла. В нашем случае это http://kak-zagruzit-fajly-na-server.local/.
Значит к проверке
<?php if(isset($_GET)) ?>
добавляем еще одно условие
<?php !empty($_SERVER) ?>
В результате мы имеем такую проверку:
<?php if(isset($_GET) && !empty($_SERVER) ?>
