양식 및 FormData를 사용하여 파일 제출.

1.

파일 제출 지침을 진행하기 전에 먼저 양식 태그를 검토해 보겠습니다. form에는 많은 속성이 있습니다. 여기서는 다음 두 가지 속성만 설명하겠습니다.

1, method (enctype은 'application/x-www-form-urlencoded')

대형 경우에는 GET 및 POST만 사용됩니다.

  ①GET: 양식 제출을 위해 GET을 사용하는 경우 사용자 에이전트(브라우저)는 이름=값에 따라 각 입력 구성요소를 자동으로 처리합니다. (encodeURIComponent를 사용하여 이름과 값을 각각 인코딩한 다음 '='를 사용하여 인코딩된 키를 연결합니다. -값 쌍, 여러 개의 키-값 쌍이 '&'를 사용하여 연결되어 URL 끝에 연결되는 쿼리 문자열을 생성합니다. ㅋㅋ ~                                                .

둘 사이의 주요 차이점은 다음과 같습니다. GET에는 제출된 데이터의 크기가 일반적으로 2kb로 제한되는 반면 POST에는 이론상 제한이 없습니다(그러나 실제 크기는 약 2GB입니다).

①application/x-www-form-urlencode

: enctype이 이 옵션을 사용하면 브라우저는 문자를 인코딩하지 않고 대신 컨트롤(입력 등) 단위로 분할하고 각 컨트롤에 콘텐츠를 추가합니다. -Disposition: form-data, name(입력에 해당하는 이름), filename(파일을 제출하면 변경된 필드가 있음), Content-Type(이전 필드와 동일, 파일 제출 시 존재함): 파일 형식(매우 쉽게 위조됨). 그리고 경계(구분자, 다른 브라우저, 각 제출이 다름)도 추가됩니다

마지막으로 이 정보는 함께 통합되어 메시지로 인코딩되어 서버에 제출됩니다(바이너리 데이터 형식). ).

주된 목적은 파일을 업로드하는 것이므로 업로드 크기에 대한 특정 요구 사항이 있으므로 업로드에 GET을 사용하는 경우 방법은 POST로만 선택할 수 있습니다. 파일이 제출됩니다. 이 옵션은 파일을 업로드할 때 반드시 사용해야 하는 옵션입니다. enctype을 "multipart/form-data"로 설정한 후 을 사용하여 파일을 업로드할 수 있습니다.

1. <form action="server.js" method="POST" enctype="다중 부분 /form-data">  

2.   <input type="file" name="file0" >  

3. <input type="submit"value="upload" >

4. 양식>

2. FormData

FormData 사용 방법을 살펴보겠습니다.

var formData = new FormData(); //인스턴스를 생성하려면 해당 폼에 해당하는 DOM 노드를 매개변수로 전달하면 해당 폼의 데이터가 formData 인스턴스에 저장됩니다.

FormData.append(name, value); //append 메소드를 사용하고 해당 키와 값을 전달합니다.

// 기타 코드

var xhr = new XMLHttpRequest();
//使用FormData构造函数创建一个FormData的实例 
var formData = new FormData(); 
// formData.append('file0', oInput.value);
//注意，这里的value不是普通的表单value，而是一个file对象 
formData.append('file0', oInput.files[0]); 
xhr.open('POST', 'http://localhost:8080');  
xhr.onload = function(){  
  if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {  
    console.log(xhr.responseText);  
  }  
};
//form表单的默认值为①，而FormData的默认值为multipart/form-data,所以不用画蛇添足的去修改请求头  
//xhr.setRequestHeader(&#39;Content-Type&#39;, &#39;multipart/form-data&#39;);
xhr.send(formData);

관련 권장사항:

django는 요청을 사용하여 브라우저에서 보낸 매개변수를 가져옵니다.

React 이 바인딩에 대한 몇 가지 생각

위 내용은 양식 및 FormData를 사용하여 파일 제출.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!