Understanding HTML Form Encoding: URL Encoded and Multipart Forms
Now, let us look at each form type with an example to understand them better.
URL Encoded Form
As the name suggests, the data that is submitted using this type of form is URL endcoded. Take the following form,
action="/urlencoded?firstname=sid&lastname=sloth" method="POST" enctype="application/x-www-form-urlencoded"> type="text" name="username" value="sidthesloth"/> type="text" name="password" value="slothsecret"/> type="submit" value="Submit" /> Here, you can see that the form is submitted to the server using a POST request, this means that it has a body. But how is the body formatted? It is URL encoded. Basically, a long string of (name, value) pairs are created. Each (name, value) pair is separated from one another by a & (ampersand) sign, and for each (name, value) pair, the name is separated from the value by an = (equals) sign, like say,
For the above form, it would be,
username=sidthesloth&password=slothsecret
Also, notice that we have some query parameters passed in the action URL, /urlencoded?firstname=sid&lastname=sloth .
Don’t the URL encoded body and the query parameters passed in the action URL look awfully similar? It’s because they are similar. They share the same format discussed above.
Try creating an HTML file with the above code and see how it’s submitted in the dev tools. Here is a snap,
The things to notice here are the Content-Type header which says application/x-www-form-urlencoded , the query string and the form fields are transferred to the server in the format as discussed above.
Note: Don’t get confused by the term Form Data in the screen shot. It’s just how Google Chrome represents form fields.
All is fine, but there is a little more to the encoding process. Let’s introduce some spaces in the submitted values, take the below form which is the same as the previous one but has the firstname value changed from sid to sid slayer and username value changed from sidthesloth to sid the sloth .
action="/urlencoded?firstname=sid slayer&lastname=sloth" method="POST" enctype="application/x-www-form-urlencoded"> type="text" name="username" value="sid the sloth"/> type="text" name="password" value="slothsecret"/> type="submit" value="Submit" /> Now try to submit the form and see how the form fields are transferred in the dev tools. Here is a dev tools snap in Chrome.
Clearly, you can see that the spaces are replaced by either ‘%20’ or ‘+’. This is done for both the query parameters and the form body.
Read this to understand when + and %20 can be used. This encompasses the URL encoding process.
Multipart Forms
Multipart forms are generally used in contexts where the user needs files to be uploaded to the server. However, we’ll just focus on simple text field based forms, as is it enough to understand how they work.
To convert the above form into a multipart form all you have to do is to change the enctype attribute of the form tag from application/x-www-form-urlencoded to multipart/form-data .
action="/multipart?firstname=sid slayer&lastname=sloth" method="POST" enctype="multipart/form-data"> type="text" name="username" value="sid the sloth"/> type="text" name="password" value="slothsecret"/> type="submit" value="Submit" /> Let’s go ahead and submit it and see how it appears in the dev tools.
There are the two things to notice here, the Content-Type header and the payload of the form request. Let’s go through them one by one.
Content-Type Header
The value of the Content-Type header is obviously multipart/form-data . But it also has another value, boundary . The value for this in the example above is generated by the browser, but the user can very well define it as well, say for example, boundary=sidtheslothboundary . We’ll get to see how it’s useful in the next section.
Request Body
The request payload contains the form fields themselves. Each (name, value) pair is converted into a MIME message part of the following format,
The above format is repeated for each (name, value) pair.
Finally, the entire payload is terminated by the boundary value suffixed with a — . So the entire request looks like,
Now, we see how the boundary value is used.
In the case of an application/x-www-form-urlencoded form, the & ampersand kind of acts as a delimiter between each (name, value) pair, enabling the server to understand when and where a parameter value starts and ends.
In the case of a multipart/form-data form, the boundary value serves this purpose. Say if the boundary value was XXX , the request payload would look like,
—XXX
Content-Disposition: form-data; name=»username»
sidthesloth
—XXX
Content-Disposition: form-data; name=»password»
The hyphens themselves are not part of the boundary value but rather needed as part of the request format. The Content-Type header for the above request would be,
Content-Type: multipart/form-data; boundary=XXX
This allows the browser to understand, when and where each field starts and ends.
Text/plain Forms
These forms are pretty much the same as the URL encoded forms, except that the form fields are not URL encoded when sent to the server. These are not used widely in general, but they have been introduced as a part of the HTML 5 specification.
Avoid using them as they meant for human understanding and not for machines.
Payloads using the text/plain format are intended to be human readable. They are not reliably interpretable by computer, as the format is ambiguous (for example, there is no way to distinguish a literal newline in a value from the newline at
the end of the value).
Hope, I was clear in explaining what I learnt..See you in the next one guys..Peace.. 🙂
Get to know more about me on my website..✨
POST запрос, составное содержимое (multipart/form-data)
В жизни любого программиста попадаются задачки, которые человека цепляют. Вот не нравится стандартный метод решения и все! А порой бывает, что стандартные решения не подходят по какой-то причине. Некоторые люди обходят такие задачи стороной, другие же любят решать их. Можно даже сказать сами их находят. Одна из таких задач отсылка файла или несколько файлов методом POST.
Некоторые наверное скажут, эта задача совсем не задача. Ведь есть замечательная библиотека CURL, которая довольно простая и решает эту задачу легко! Но не спешите. Да, CURL мощная библиотека, да она загружает файлы, но… Как Вы знаете у нее есть маленькая особенность — файл должен быть размещен на жестком диске!
А теперь давайте представим себе такую ситуацию, Вы генерируете динамически файл или же он уже находится в памяти и нужно его отправить методом POST на удаленный Web сервер. Что же тогда получается? Перед его отправкой нужно его сохранить? Да именно так и поступило бы 90% программистов. Зачем искать лишние проблемы, если решение лежит на поверхности? Но мы же с Вами не из этих 90%! Мы же лучше, мы же можем решить любую задачку. Зачем нам лишнее действие? Во-первых, оно задействует не быструю файловую систему жесткого диска. Во-вторых, у нас может и не быть доступа к файловой системе или же там выделено слишком мало места.
Как же нам тогда решить эту задачку? Для этого надо взглянуть как собственно передаются данные методом POST. Единственный вариант решения — это передача файла составным запросом с помощью multipart/form-data. Этот метод хорошо описан в RFC7578. Давайте взглянем как будет выглядеть тело POST запроса multipart/form-data:
POST /form.html HTTP/1.1 Host: server.com Referer: http://server.com/form.html User-Agent: Mozilla Content-Type: multipart/form-data; boundary=-------------573cf973d5228 Content-Length: 288 Connection: keep-alive Keep-Alive: 300 (пустая строка) (отсутствующая преамбула) ---------------573cf973d5228 Content-Disposition: form-data; name="field" text ---------------573cf973d5228 Content-Disposition: form-data; name="file"; filename="sample.txt" Content-Type: text/plain Content file ---------------573cf973d5228--
Наше тело состоит из двух частей, в первой части мы передаем значение поля формы name=«field» равное: text. Во второй части мы передаем поле name=«file» с содержимым файла filename=«sample.txt»: Content file. В заголовке мы указываем формат содержимого POST запроса — Content-Type: multipart/form-data, строку разделитель составных частей: boundary=————-573cf973d5228 и длину сообщения — Content-Length: 288.
Осталось, собственно, написать программу реализующий этот метод. Так как мы люди умные и не пишем по сто раз одно и тоже в разных проектах, то оформим все в виде класса реализующий этот метод. Плюс к этому, расширим его для разных вариантов отправки как файлов, так и простых элементов формы. А что бы отличить среди массива POST данных, наличие файла, создадим отдельный файл — контейнер с содержимым файла и его данных (имя и расширение). Таким образом он будет выглядеть следующим образом:
class oFile < private $name; private $mime; private $content; public function __construct($name, $mime=null, $content=null) < // Проверяем, если $content=null, значит в переменной $name - путь к файлу if(is_null($content)) < // Получаем информацию по файлу (путь, имя и расширение файла) $info = pathinfo($name); // проверяем содержится ли в строке имя файла и можно ли прочитать файл if(!empty($info['basename']) && is_readable($name)) < $this->name = $info['basename']; // Определяем MIME тип файла $this->mime = mime_content_type($name); // Загружаем файл $content = file_get_contents($name); // Проверяем успешно ли был загружен файл if($content!==false) $this->content = $content; else throw new Exception('Don`t get content - "'.$name.'"'); > else throw new Exception('Error param'); > else < // сохраняем имя файла $this->name = $name; // Если не был передан тип MIME пытаемся сами его определить if(is_null($mime)) $mime = mime_content_type($name); // Сохраняем тип MIME файла $this->mime = $mime; // Сохраняем в свойстве класса содержимое файла $this->content = $content; >; > // Метод возвращает имя файла public function Name() < return $this->name; > // Метод возвращает тип MIME public function Mime() < return $this->mime; > // Метод возвращает содержимое файла public function Content() < return $this->content; > >;
Теперь собственно сам класс по формированию тела multipart/form-data для POST запроса:
class BodyPost < //Метод формирования части составного запроса public static function PartPost($name, $val) < $body = 'Content-Disposition: form-data; name="' . $name . '"'; // Проверяем передан ли класс oFile if($val instanceof oFile) < // Извлекаем имя файла $file = $val->Name(); // Извлекаем MIME тип файла $mime = $val->Mime(); // Извлекаем содержимое файла $cont = $val->Content(); $body .= '; filename="' . $file . '"' . "\r\n"; $body .= 'Content-Type: ' . $mime ."\r\n\r\n"; $body .= $cont."\r\n"; > else $body .= "\r\n\r\n".urlencode($val)."\r\n"; return $body; > // Метод формирующий тело POST запроса из переданного массива public static function Get(array $post, $delimiter='-------------0123456789') < if(is_array($post) && !empty($post)) < $bool = false; // Проверяем есть ли среди элементов массива файл foreach($post as $val) if($val instanceof oFile) ; if($bool) < $ret = ''; // Формируем из каждого элемента массива, составное тело POST запроса foreach($post as $name=>$val) $ret .= '--' . $delimiter. "\r\n". self::PartPost($name, $val); $ret .= "--" . $delimiter . "--\r\n"; > else $ret = http_build_query($post); > else throw new \Exception('Error input param!'); return $ret; > >;
Данный класс состоит из нескольких методов. Метод — PartPost формирует отдельные части составного запроса, а метод — Get объединяет эти части и формирует тело POST запроса в формате — multipart/form-data.
Теперь у нас есть универсальный класс для отправки тела POST запроса. Осталось написать программу использующую данный класс для отправки файлов на удаленный Web сервер. Воспользуемся библиотекой CURL:
// Подключаем класс-контейнер содержимого файла include "ofile.class.php"; // Подключаем класс для формирования тела POST запроса include "bodypost.class.php"; // Генерируем уникальную строку для разделения частей POST запроса $delimiter = '-------------'.uniqid(); // Формируем объект oFile содержащий файл $file = new oFile('sample.txt', 'text/plain', 'Content file'); // Формируем тело POST запроса $post = BodyPost::Get(array('field'=>'text', 'file'=>$file), $delimiter); // Инициализируем CURL $ch = curl_init(); // Указываем на какой ресурс передаем файл curl_setopt($ch, CURLOPT_URL, 'http://server/upload/'); // Указываем, что будет осуществляться POST запрос curl_setopt($ch, CURLOPT_POST, 1); // Передаем тело POST запроса curl_setopt($ch, CURLOPT_POSTFIELDS, $post); /* Указываем дополнительные данные для заголовка: Content-Type - тип содержимого, boundary - разделитель и Content-Length - длина тела сообщения */ curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: multipart/form-data; boundary=' . $delimiter, 'Content-Length: ' . strlen($post))); // Отправляем POST запрос на удаленный Web сервер curl_exec($ch);Если CURL не подходит, то данную библиотеку можно применить и для отправки через сокеты. Ну и собственно ссылки на источники: