etc./StackOverFlow

enctype='multipart/form-data'는 무엇을 의미합니까?

청렴결백한 만능 재주꾼 2022. 1. 25. 11:40
반응형

질문자 :EBAG


enctype='multipart/form-data' 는 HTML 형식에서 무엇을 의미하며 언제 사용해야 합니까?



POST 요청을 할 때 어떤 방식으로든 요청 본문을 구성하는 데이터를 인코딩해야 합니다.

HTML 양식은 세 가지 인코딩 방법을 제공합니다.

  • application/x-www-form-urlencoded (기본값)
  • multipart/form-data
  • text/plain

application/json 을 추가하는 작업이 수행되었지만 포기되었습니다.

(HTML 양식 제출 이외의 다른 수단을 사용하여 생성된 HTTP 요청으로 다른 인코딩이 가능합니다. JSON은 웹 서비스와 함께 사용하는 일반적인 형식이며 일부는 여전히 SOAP를 사용합니다.)

형식의 세부 사항은 대부분의 개발자에게 중요하지 않습니다. 중요한 사항은 다음과 같습니다.

  • text/plain 사용하지 마십시오.

클라이언트 측 코드를 작성할 때:

  • <input type="file"> 요소가 포함된 경우 multipart/form-data 사용
  • 그렇지 않으면 multipart/form-data 또는 application/x-www-form-urlencoded 있지만 application/x-www-form-urlencoded 가 더 효율적입니다.

서버 측 코드를 작성할 때:

  • 미리 작성된 양식 처리 라이브러리 사용

CGI->param 이나 PHP의 $_POST superglobal에 의해 노출된 것과 같은 대부분의 것들은 여러분을 위해 차이점을 처리할 것입니다. 서버에서 수신한 원시 입력을 구문 분석하려고 애쓰지 마십시오.

때로는 두 형식을 모두 처리할 수 없는 라이브러리를 찾을 수 있습니다. Node.js에서 양식 데이터를 처리하는 데 가장 널리 사용되는 라이브러리는 다중 요청을 처리할 수 없는 body-parser 입니다(그러나 가능한 몇 가지 대안을 권장하는 문서가 있음).

원시 데이터를 구문 분석하거나 생성하기 위해 라이브러리를 작성(또는 디버깅)하는 경우 형식에 대해 걱정해야 합니다. 관심을 위해 그것에 대해 알고 싶을 수도 있습니다.

application/x-www-form-urlencoded 는 URL 끝에 있는 쿼리 문자열과 거의 같습니다.

multipart/form-data 는 훨씬 더 복잡하지만 전체 파일을 데이터에 포함할 수 있습니다. 결과의 예는 HTML 4 사양 에서 찾을 수 있습니다.

text/plain 은 HTML 5에서 도입되었으며 디버깅에만 유용 합니다. 사양에서 : 컴퓨터에서 안정적으로 해석할 수 없습니다 . 다른 도구는 도구(대부분의 브라우저 개발자 도구의 네트워크 패널 과 같은)와 결합되어 있다고 주장합니다. )를 위해 더 좋습니다.


Quentin

언제 사용해야합니까

Quentin의 대답은 맞습니다. 양식에 파일 업로드가 포함되어 있으면 multipart/form-data application/x-www-form-urlencoded enctype 을 생략하는 경우 기본값입니다.

할거다:

  • HTML5 참조를 더 추가하십시오.
  • 양식 제출 예제로 그가 옳은 이유 를 설명하십시오.

HTML5 참조

enctype 에는 세 가지 가능성 이 있습니다.

예제를 생성하는 방법

각 방법의 예를 보면 어떻게 작동하는지, 언제 각각을 사용해야 하는지 명확해집니다.

다음을 사용하여 예제를 생성할 수 있습니다.

양식을 최소 .html 파일로 저장합니다.

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>upload</title> </head> <body> <form action="http://localhost:8000" method="post" enctype="multipart/form-data"> <p><input type="text" name="text1" value="text default"> <p><input type="text" name="text2" value="a&#x03C9;b"> <p><input type="file" name="file1"> <p><input type="file" name="file2"> <p><input type="file" name="file3"> <p><button type="submit">Submit</button> </form> </body> </html>

기본 텍스트 값을 a&#x03C9;b ω 가 U+03C9 이기 때문에 aωb 를 의미하며, 이는 UTF-8 61 CF 89 62

업로드할 파일 만들기:

 echo 'Content of a.txt.' > a.txt echo '<!DOCTYPE html><title>Content of a.html.</title>' > a.html # Binary file containing 4 bytes: 'a', 1, 2 and 'b'. printf 'a\xCF\x89b' > binary

작은 에코 서버를 실행합니다.

 while true; do printf '' | nc -l 8000 localhost; done

브라우저에서 HTML을 열고 파일을 선택하고 제출을 클릭하고 터미널을 확인하십시오.

nc 는 수신된 요청을 인쇄합니다.

테스트: Ubuntu 14.04.3, nc BSD 1.105, Firefox 40.

멀티파트/폼 데이터

Firefox가 보냈습니다:

 POST / HTTP/1.1 [[ Less interesting headers ... ]] Content-Type: multipart/form-data; boundary=---------------------------735323031399963166993862150 Content-Length: 834 -----------------------------735323031399963166993862150 Content-Disposition: form-data; name="text1" text default -----------------------------735323031399963166993862150 Content-Disposition: form-data; name="text2" aωb -----------------------------735323031399963166993862150 Content-Disposition: form-data; name="file1"; filename="a.txt" Content-Type: text/plain Content of a.txt. -----------------------------735323031399963166993862150 Content-Disposition: form-data; name="file2"; filename="a.html" Content-Type: text/html <!DOCTYPE html><title>Content of a.html.</title> -----------------------------735323031399963166993862150 Content-Disposition: form-data; name="file3"; filename="binary" Content-Type: application/octet-stream aωb -----------------------------735323031399963166993862150--

이진 파일 및 텍스트 필드의 경우 바이트 61 CF 89 62 ( aωb )가 문자 그대로 전송됩니다. nc -l localhost 8000 | hd , 바이트는 다음과 같습니다.

 61 CF 89 62

전송되었습니다( 61 == 'a' 및 62 == 'b').

따라서 다음이 분명합니다.

  • Content-Type: multipart/form-data; boundary=---------------------------735323031399963166993862150 콘텐츠 유형을 multipart/form-data 하고 필드가 지정된 boundary 문자열.

    그러나 다음 사항에 유의하십시오.

     boundary=---------------------------735323031399963166993862150

    이 적은 dadhes가 -- 실제 장벽 이상을

     -----------------------------735323031399963166993862150

    이는 표준에서 경계가 두 개의 대시( -- 로 시작해야 하기 때문입니다. 다른 대시는 Firefox가 임의의 경계를 구현하기 위해 선택한 것처럼 보입니다. RFC 7578은 분명히 두 선두 대시가 있음을 언급 -- : 필요

    4.1. multipart/form-data의 "경계" 매개변수

    다른 다중 부분 유형과 마찬가지로 부분은 CRLF, "--" 및 "경계" 매개변수 값을 사용하여 구성된 경계 구분 기호로 구분됩니다.

  • 모든 필드는 데이터 앞에 일부 하위 헤더를 가져옵니다. Content-Disposition: form-data; , 필드 name , filename , 데이터가 뒤따릅니다.

    서버는 다음 경계 문자열까지 데이터를 읽습니다. 브라우저는 필드에 표시되지 않는 경계를 선택해야 하므로 경계가 요청 간에 다를 수 있습니다.

    고유한 경계가 있으므로 데이터 인코딩이 필요하지 않습니다. 이진 데이터는 있는 그대로 전송됩니다.

    TODO: 최적의 경계 크기( log(N) I bet)는 무엇이며 이를 찾는 알고리즘의 이름/실행 시간은 무엇입니까? 질문: https://cs.stackexchange.com/questions/39687/find-the-shortest-sequence-that-is-not-a-sub-sequence-of-a-set-of-sequences

  • Content-Type 은 브라우저에 의해 자동으로 결정됩니다.

    정확하게 결정되는 방법은 다음에서 질문했습니다. 업로드된 파일의 MIME 유형은 브라우저에서 어떻게 결정됩니까?

application/x-www-form-urlencoded

이제 enctype 을 application/x-www-form-urlencoded 로 변경하고 브라우저를 다시 로드하고 다시 제출하십시오.

Firefox가 보냈습니다:

 POST / HTTP/1.1 [[ Less interesting headers ... ]] Content-Type: application/x-www-form-urlencoded Content-Length: 51 text1=text+default&text2=a%CF%89b&file1=a.txt&file2=a.html&file3=binary

분명히 파일 데이터는 전송되지 않고 기본 이름만 전송되었습니다. 따라서 이것은 파일에 사용할 수 없습니다.

a 및 b 와 같은 일반적인 인쇄 가능한 문자가 1바이트로 전송된 반면 0xCF 및 0x89 와 같은 인쇄 불가능한 문자는 각각 3바이트를 차지했습니다 %CF%89 !

비교

파일 업로드에는 인쇄할 수 없는 문자(예: 이미지)가 많이 포함되어 있는 반면 텍스트 형식은 거의 없습니다.

예에서 우리는 다음을 보았습니다.

  • multipart/form-data : 메시지에 몇 바이트의 경계 오버헤드를 추가하고 이를 계산하는 데 시간을 소비해야 하지만 각 바이트를 1바이트로 보냅니다.

  • application/x-www-form-urlencoded : 필드당 단일 바이트 경계( & )를 갖지만 인쇄할 수 없는 모든 문자에 대해 3x 의 선형 오버헤드 요소를 추가합니다.

application/x-www-form-urlencoded 하여 파일을 보낼 수 있더라도 너무 비효율적이므로 원하지 않을 것입니다.

그러나 텍스트 필드에서 발견되는 인쇄 가능한 문자의 경우 중요하지 않고 오버헤드가 덜 발생하므로 그냥 사용합니다.


Ciro Santilli 新疆再教育营六四事件法轮功郝海东

enctype='multipart/form-data 는 POST를 통해 파일을 보낼 수 있는 인코딩 유형입니다. 간단히 말해서 이 인코딩 없이는 파일을 POST를 통해 보낼 수 없습니다.

사용자가 양식을 통해 파일을 업로드할 수 있도록 하려면 이 enctype 을 사용해야 합니다.


Matt Asbury

양식을 제출할 때 HTTP 프로토콜을 통해 TCP/IP 프로토콜 메시지 구조에 적절하게 포함된 네트워크의 메시지를 보내도록 브라우저에 지시합니다. <form> 을 사용하여 서버에 데이터를 보내는 방법이 있습니다.

양식이 제출되면 HTTP 요청이 생성되어 서버로 보내지며 메시지에는 양식의 필드 이름과 사용자가 입력한 값이 포함됩니다. 이 전송은 POST 또는 GET HTTP 메소드로 발생할 수 있습니다.

  • POST 는 브라우저에 HTTP 메시지를 작성하고 모든 콘텐츠를 메시지 본문에 넣으라고 지시합니다(일을 하는 매우 유용한 방법, 더 안전하고 유연함).
  • GET 은 쿼리 문자열 에 있는 양식 데이터를 제출합니다. 데이터 표현 및 길이에 대한 몇 가지 제약이 있습니다.

양식을 서버로 보내는 방법 설명

속성 enctype POST 메서드를 사용할 때만 의미가 있습니다. 지정되면 특정 방식으로 콘텐츠를 인코딩하여 양식을 보내도록 브라우저에 지시합니다. MDN에서 - 양식 enctype :

method 속성의 값이 post인 경우 enctype은 양식을 서버에 제출하는 데 사용되는 콘텐츠의 MIME 유형입니다.

  • application/x-www-form-urlencoded : 기본값입니다. 폼이 전송되면 모든 이름과 값이 수집되고 최종 문자열에 대해 URL 인코딩이 수행됩니다.
  • multipart/form-data : 문자가 인코딩되지 않습니다. 이는 양식에 파일 업로드 컨트롤이 있는 경우 중요합니다. 파일 바이너리를 보내려고 하면 비트스트림이 변경되지 않습니다.
  • text/plain : 공백이 변환되지만 더 이상 인코딩이 수행되지 않습니다.

보안

양식을 제출할 때 RFC 7578 섹션 7: 멀티파트 양식 데이터 - 보안 고려 사항에 명시된 대로 몇 가지 보안 문제가 발생할 수 있습니다.

모든 양식 처리 소프트웨어는 사용자가 제공한 양식 데이터를 처리해야 합니다.
기밀 또는 개인적으로 포함되는 경우가 많기 때문에 민감하게
식별 정보. 웹 브라우저에서 양식 "자동 채우기" 기능이 널리 사용됩니다. 사용자를 속이는 데 사용될 수 있습니다.
다른 방법으로 완료할 때 무의식적으로 기밀 정보를 보냅니다.
무해한 작업. multipart/form-data는 기능을 제공하지 않습니다.
무결성 검사, 기밀성 보장, 사용자 회피
혼란 또는 기타 보안 기능 그 우려는 반드시
양식 채우기 및 양식 데이터 해석 응용 프로그램에 의해 해결됩니다.

양식을 수신하고 처리하는 애플리케이션은 전송을 의도하지 않은 요청 양식 처리 사이트에 데이터를 다시 제공하지 않도록 주의해야 합니다.

콘텐츠의 파일 이름을 해석할 때 중요합니다.
실수로 파일을 덮어쓰지 않도록 처리 헤더 필드
받는 사람의 파일 공간.

이것은 귀하가 개발자이고 귀하의 서버가 민감한 정보를 포함할 수 있는 사용자가 제출한 양식을 처리하는 경우에 문제가 됩니다.


Andry

enctype='multipart/form-data' 는 문자가 인코딩되지 않음을 의미합니다. 이것이 파일을 서버에 업로드할 때 이 유형이 사용되는 이유입니다.
따라서 multipart/form-data 는 양식에 파일 내용과 같은 이진 데이터를 업로드해야 할 때 사용됩니다.


GP Singh

양식을 사용하여 URL 매개변수 안에 파일 내용을 넣을 수 없기 때문에 메소드 속성을 POST로 설정하십시오.

enctype 값을 multipart/form-data로 설정하십시오. 데이터가 여러 부분으로 분할되기 때문입니다. 각 파일에 대해 하나씩, 함께 보낼 수 있는 양식 본문의 텍스트에 대해 하나씩입니다.


sandy

  • enctype( ENC ode TYPE ) 속성은 양식 데이터를 서버에 제출할 때 양식 데이터를 인코딩하는 방법을 지정합니다.
  • multipart/form-data 는 파일 업로드가 있는 form 요소에서 사용되는 enctype 속성 값 중 하나이다. 다중 부분 은 양식 데이터를 여러 부분 으로 나누어 서버로 보내는 것을 의미합니다.

Premraj

일반적으로 이것은 파일 업로드를 데이터로 취해야 하는 POST 양식이 있는 경우입니다... 이것은 서버에 전송된 데이터를 인코딩하는 방법을 알려줍니다. 이 경우 전송 및 업로드하기 때문에 인코딩되지 않습니다. 예를 들어 이미지 또는 pdf를 업로드할 때와 같이 서버에 파일


Eric

enctype 속성은 양식 데이터를 서버에 제출할 때 양식 데이터를 인코딩하는 방법을 지정합니다.

enctype 속성은 method="post"인 경우에만 사용할 수 있습니다.

인코딩된 문자가 없습니다. 이 값은 파일 업로드 컨트롤이 있는 양식을 사용할 때 필요합니다.

W3Schools에서


Rishad

출처 : http:www.stackoverflow.com/questions/4526273/what-does-enctype-multipart-form-data-mean

반응형

'etc. > StackOverFlow' 카테고리의 다른 글

어디에 넣어야 하나<script> tags in HTML markup?  (0) 2022.01.25
0.1f를 0으로 변경하면 성능이 10배 느려지는 이유는 무엇입니까?  (0) 2022.01.25
0과 9 사이의 임의의 정수 생성  (0) 2022.01.25
파일 내용에서 Java 문자열을 어떻게 생성합니까?  (0) 2022.01.25
히스토리가 있는 SVN 리포지토리를 새 Git 리포지토리로 마이그레이션하려면 어떻게 해야 합니까?  (0) 2022.01.25

'etc./StackOverFlow'의 다른글

  • 현재글enctype='multipart/form-data'는 무엇을 의미합니까?

관련글

댓글

티스토리툴바