Form multipart form data html: html — Example of multipart/form-data

Атрибут enctype указывает как данные формы должны быть закодированы при отправке на сервер. Multipart/form-data — один из наиболее часто используемых типов enctype/content.
В multipart каждое из отправляемых полей имеет свой тип содержимого, имя файла и данные, отделенные границей от другого поля.

Кодирование данных не требуется из-за уникальной границы. Двоичные данные отправляются как есть. Сервер считывает до следующей граничной строки.

Тип носителя multipart/form-data следует правилам всех составных потоков данных MIME, как указано в [RFC 2046]. В формах есть ряд полей, которые должен заполнить пользователь, заполняющий форму. Каждое поле имеет имя. В пределах заданной формы имена уникальны.

«multipart/form-data» содержит ряд частей. Ожидается, что каждая часть будет содержать заголовок содержимого-диспозиции [RFC 2183], где тип диспозиции — «данные формы», и где диспозиция содержит (дополнительный) параметр «имя», где значение этого параметра является исходным. имя поля в форме. Например, часть может содержать заголовок:

Content-Disposition: form-data; name=»user»
со значением, соответствующим записи в поле «user».

Имена полей, первоначально представленные в наборах символов, отличных от ASCII, могут быть закодированы в значении параметра «name» с использованием стандартного метода, описанного в RFC 2047. Как и во всех составных типах MIME, каждая часть имеет необязательный «Content-Type», который по умолчанию текстовый/обычный.

Если содержимое файла возвращается путем заполнения формы, то входной файл идентифицируется как соответствующий тип носителя, если он известен, или «приложение/октетный поток».

Если несколько файлов должны быть возвращены в результате ввода одной формы, они должны быть представлены как «составная/смешанная» часть, встроенная в «составные/смешанные данные».
Каждая часть может быть закодирована и предоставлен заголовок «content-transfer-encoding», если значение этой части не соответствует кодировке по умолчанию.

Существует три основных варианта enctype:
1. application/x-www-form-urlencoded (по умолчанию)

2. multipart/form-data (для содержимого MIME)

3. text-plain (ненадежный)

Тип/тип содержимого по умолчанию — «application/x-www-form-urlencoded». Это неэффективно для отправки большого количества двоичных данных или текста, содержащего символы, отличные от ASCII. Multipart/form-data следует использовать для отправки форм, содержащих большие файлы, данные, отличные от ASCII, и большие двоичные данные.

Кроме того, multipart/form-data можно использовать для форм, которые представлены с использованием таких представлений, как электронные таблицы, Portable Document Format и т. д., т. е. отличных от HTML.

ПРИМЕР: прочитайте внимательно

Пример: я отправляю Text= «Danish» вместе с текстовым файлом (file1.txt) и файлом изображения (file2.jpg)

Content-Type: multipart/form-data; border=Your_Boundary_String

— Your_Unique_Boundary_String

content-Disposition: form-data; имя = «имя»

Датский

— Your_Unique_Boundary_String

content-Disposition: form-data; name=»files»

Content-Type: multipart/mixed; border=New_Boundary_String

— New_Boundary_String

content-Disposition: form-data; filename=»file1.txt»

Content-Type: text/plain

……. .Contents of file1.txt……

— New_Boundary_String

content-Disposition: file; filename=»file2.jpg»

Content-Type: image/jpg

Контент-трансфер-кодирование: двоичный

…… .. Контента файла2.jpg ……

-new_boundary_string

-your_unique_boundary_string

Объектив-C-реализация. createMultipartRequestWithURL:(NSString *)urlString{

NSMutableURLRequest *request = [[NSMutableURLRequest alloc] initWithURL:[NSURL URLWithString:urlString]];

NSString *boundary = @”Your_Unique_Boundary_String”;

NSString *contentType = [NSString stringWithFormat:@”multipart/form-data; граница = %@»,граница];

[запрос addValue:contentType forHTTPHeaderField:@»Content-Type»];

[запрос setHTTPMethod:@»POST»];

[запрос setHTTPBody: [сам создатьMulitpartBodyWithBoundary: граница]];

запрос на возврат;

}

— (NSData *) createMultipartRequestBodyWithBoudary: (NSString *) граница

{

NSMutableData *body = [NSMutableData new];

[самостоятельно appendObjectDataInMultipartBody:тело withBoundary:boundary objectName:@»submit-name» objectData:self. submit-name.text];

[тело appendData:[[NSString stringWithFormat:@»Content-Disposition: form-data; имя=\»файлы\»\r\n\r\n%@»] dataUsingEncoding: NSUTF8StringEncoding]];

NSString *newBoundary = @”New_Boundary_String”;

[тело appendData:[[NSString stringWithFormat:@”Content-Type: multipart/mixed; граница =% @», newBoundary] dataUsingEncoding: NSUTF8StringEncoding]];

[самостоятельно appendFileDataInMultipartBody: тело с границей: newBoundary fileName: @»file1.txt» contentType:@»text/plain» fileData:fileData];

[самостоятельно appendFileDataInMultipartBody: тело с границей: newBoundary fileName: @»file2.jpg» contentType:@»image/jpeg» fileData:fileData];

[тело appendData: [[NSSTring stringWithFormat: @”\r\n- -%@\r\n”,граница] dataUsingEncoding: NSUTF8StringEncoding]];

возвратный корпус;

}

— (void)appendObjectDataInMultipartBody:(NSMutableData *)body withBoundary:(NSString *)boundary objectName:(NSString *)objectName objectData:(ID)objectData{

[тело appendData: [[NSSTring stringWithFormat: @”\r\n- -%@\r\n”,граница] dataUsingEncoding: NSUTF8StringEncoding]];

[тело appendData:[[NSString stringWithFormat:@»Content-Disposition: form-data; name=\»%@\»\r\n\r\n%@»,objectName, objectData] dataUsingEncoding: NSUTF8StringEncoding]];

[тело appendData: [[NSSTring stringWithFormat: @”\r\n- -%@\r\n”,граница] dataUsingEncoding: NSUTF8StringEncoding]];

}

— (void)appendFileDataInMultipartBody:(NSMutableData *)body withBoundary:(NSString *)boundary fileName:(NSString *)name contentType:(NSString *)type fileData:(NSData *)data

{

[тело appendData: [[NSSTring stringWithFormat: @”\r\n- -%@\r\n”,граница] dataUsingEncoding: NSUTF8StringEncoding]];

[тело appendData:[[NSString stringWithFormat:@»Content-Disposition: form-data; имя_файла=\»%@\»,имя] dataUsingEncoding: NSUTF8StringEncoding]];

[тело appendData:[@»Content-Type: %@»,тип dataUsingEncoding:NSUTF8StringEncoding]];

[тело appendData: данные];

[тело appendData: [[NSString stringWithFormat: @”\r\n”] dataUsingEncoding: NSUTF8StringEncoding]];

[тело appendData: [[NSSTring stringWithFormat: @”\r\n- -%@\r\n”,граница] dataUsingEncoding: NSUTF8StringEncoding]];

}

Ссылки:

• https://www. ietf.org/rfc/rfc2388.txt
• https://www.w3schools.com/tags/att_form_enc081.as и файлы через многокомпонентные формы с FormData в HTML | Куанг Нгуен | quangtn0018

  В последнее время я выполнял множество отправок форм, которые включают в себя ввод текста и файлов для изображений, поэтому я подумал, что было бы неплохо поделиться тем, как это делается, или, по крайней мере, как я это сделал. Это решение, использующее чистый HTML и JavaScript без дополнительных надстроек или фреймворков. (Надо начинать с основ!)

  Сначала я просто создавал набор элементов ввода и собирал данные из каждого из них для отправки с помощью RESTful API ( GET , POST ). Когда я больше исследовал отправку входных данных, я наткнулся на элемент формы, который собирает ВСЕ входные значения в одном месте и отправляет их, что намного удобнее и эффективнее.

   // sendData.html
   Имя:  Выберите изображение:  Отправить
   

  Сначала мы начнем с создания простого элемента HTML-формы, ничего особенного. Нам также нужны входные данные, чтобы мы могли их отправить, что для этого конкретного примера — это текстовое поле и загрузка изображения. Пока все хорошо. Итак, если я нажму кнопку отправки, он должен отправить все входные данные в нашей форме на наш

  endpointUrl через атрибут формы action . И он может это сделать, потому что мы указали атрибут метода формы как вызов POST для нашего URL-адрес конечной точки .

  Хорошо, теперь представьте, что мы настроили и внедрили серверную часть, где мы можем нажать endpointUrl для вызова POST для обработки наших данных. Но когда мы попытались извлечь данные, то обнаружили, что ничего не отправлено (данные в формате JSON). Теперь ломаем голову и гадаем, почему данные не отправились. Разве мы не правильно настроили форму и ее входные данные? Ну, почти.

  Чего нам не хватало в нашей форме, так это включения enctype="multipart/form-data" атрибут. Теперь наш элемент формы должен выглядеть так:

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

   // sendData.js  let  formData =  new  FormData()formData.append('imageUpload', imageUpload)formData.append('fName', fName)// выполнить вызов POST 

  Выше приведен JavaScript код для извлечения данных формы и отправки на наш вызов POST. По сути, здесь мы создаем новый FormData, добавляем наши данные (текст, файлы и т. д.) и выполняем вызов POST через XHR или AJAX, в зависимости от того, как вы это делаете. Когда вы отправляете свои данные с помощью FormData, они будут разделены на два отдельных объекта, к которым вы сможете получить доступ, как только получите их на своей серверной части. Вы можете найти больше информации об отправке форм через Javascript здесь.