구현 파일의 HTML5 FormData 메소드 소개 및 구현 파일

xmlhttprequest는 브라우저 인터페이스입니다. xmlhttprequest는 현재 브라우저에서 데이터를 상호 작용하는 데 일반적으로 사용되는 방법입니다. 2008 년 2 월, XMLHTTPREQUEST 레벨 2는 이전 세대에 비해 새로운 기능을 가지고 있습니다 이진 파일을 업로드 할 수 있습니다. FormData로 파일을 업로드하는 방법을 소개하겠습니다.

먼저 FormData의 기본 방법 : FormData 객체를 살펴보면 모든 테이블 요소와 값의 쿼리 스트링을 형성하여 배경으로 제출할 수 있습니다. FormData 생성자로 양식 양식을 매개 변수로 전달합니다.

 var form = document.getElementById (form1); 새로운 FormData (form);

이러한 방식으로 FD는 AJAX Send () 메소드를 통해 백그라운드로 직접 전송 될 수 있습니다.

다음 양식이 생성됩니다. 양식의 일반 데이터 외에도 파일 업로드가 있습니다.

 <양식 이름 = form1 id = form1> <p> 이름 : <입력 유형 = 텍스트 이름 = 이름 /> <p> 성별 : <입력 유형 = 무선 이름 = 젠더 값 = 1 /> male <입력 유형 = 무선 이름 = 성별 값 = 2 /p> 여성 < /p> <p> stu-number : <입력 유형 = 텍스트 이름 = 번호 /> < /p> <p> 사진 : <입력 유형 = 파일 이름 = 사진 id = photo> </p> <p> <입력 유형 = 버튼 이름 = b1 value = onclick = fsubmit ()/p> </form> <div id = result> </div>

위의 코드는 양식을 작성하고 일부 정보를 채우고 아바타로 그림을 선택하고 DIV를 설정하여 반품 결과를 저장합니다.

간단하게, 우리는 여전히 jQuery가 캡슐화 한 Ajax를 사용하여 데이터를 배경으로 전송합니다.

 fsubmit () {var form = getElementById (form1); jQuery는 데이터 전송을 처리하지 마십시오. jquery는 컨텐츠 유형 요청 헤드 성공을 설정하지 말라고 말합니다 ejson (응답); var result = ''; + JSON [ 'Number']; <br/> 아바타 : <img src = ' +'height = 100 Style = Border-Radius; .html (result);}});

위 코드의 Server.php는 서버의 파일, AJAX 요청을 수신하고 수신 결과를 반환합니다.

 <php $ isset [ 'name']? isset ($ _ post [ 'number'])? [ 'name'] = $ response [ 'gender'= $ response [ 'photo'] = $ filename; '] = false;} echo json_encode ($ response);?>

정보를 작성한 후 제출을 클릭하여 페이지에서 다음 영향을받을 수도 있습니다.

당신이 네이티브 JavaScript 애호가 인 경우, 위의 기능은 간단한 JavaScript 구현 코드입니다.

 fsubmit () {var formdata (formdata); (oreq.status == 200) {console.log (oreq.responsetext); 개인 정보 : <br/> 이름 :+json [ 'name']+<br/> 성별 :+json [ 'gender']+<br/> 번호 :+json [ '숫자']; <<< br /> 아바타 : <img src = ' +'height = 50 style : />; post, server.php);

FormData 위의 새로운 객체 외에도 양식이 매개 변수로 직접 전달되며 다른 기능이 있습니다. 인터넷에서 FormData에서 소개 한 대부분의 기사는 Apend () 메소드 만 언급합니다. 알아 보려면 콘솔을합시다.

콘솔 후에는 FormData 객체가 그러한 방법을 가지고 있으므로 여기에 직접 테스트 할 수 있습니다.

부록 () 메소드는 FormData 객체에 키 값을 추가하는 데 사용됩니다.

 fd.append ( 'key1', value1);

FD는 FormData의 객체로 새로 구축 할 수 있습니다.

해당 키 값 값 설정

 fd.set ( 'key1', value1);

Append () 메소드와 약간 유사한 것으로 보입니다.이 둘의 차이점은 지정된 키 값이 존재할 때 () 메소드가 이전 설정의 키 값 쌍을 다루고 있다는 것입니다. 예제를 통해 여전히 비교하면, 우리는 앞서 양식의 양식을 기반으로합니다.

 fd.append ( 'name', will);

두 가지 키는 이름의 키 값입니다.

 fd.set ( 'name', will);

하나의 키만 이름의 키 값입니다.

위는 부록 ()과 set ()의 차이입니다. 세트 값 세트가 존재하지 않으면 둘의 효과는 동일합니다.

삭제하려는 키 값의 이름을 나타내는 매개 변수를 받으십시오. 동일한 키 값이 여러 개 있으면 다음을 삭제합니다.

 fd.append ( 'name', 'will');

형식의 이름 정보와 부록 ()을 통한 새로 추가 된 이름 정보가 삭제되었습니다.

찾아야 할 키의 이름을 나타내는 매개 변수를 받고 첫 번째 키의 첫 번째 값 값을 반환하십시오. 동일한 키가 여러 개있는 경우이 키의 해당 값을 모두 반환하십시오.

위의 양식을 기준으로 :

 fd.append ( 'name', 'will');

 fd.append ( 'name', 'will') (fd.getall ( 'name');

이 방법은 또한 키의 이름 인 매개 변수를 수신하여 부울 값을 반환하여 FormData 객체에 키가 포함되어 있는지 확인합니다. 위의 양식은 예입니다.

 console.log (fd.has ( 'name'));

이 메소드는 매개 변수를 수신 할 필요가 없으며이 반복자를 통해 반복자를 반환 할 필요가 없습니다. 위의 양식은 예입니다.

 for (fd.keys ()) {console.log (key);} for

결과는 다음과 같습니다.

이름

성별

숫자

사진

물론 키의 반복으로 인해 값 반복자를 통과하는 것은 필수적입니다. value ()는 값의 반복자입니다.

 for (fd.values ​​()) {console.log (value);}의 for

결과:

키를 가로 지르는 반복자가 있으며, 가치의 반복자도 있습니다. 왜 둘을 함께 참여시키지 마십시오! entries ()는 키 값 쌍이 포함 된 반복기를 반환하는 것입니다.

 for (fd.entries ()) {console.log (쌍 [0]+ ','+ 쌍 [1]);}

결과:

FormData는 XMLHTTPREQUEST 레벨 2의 새로운 인터페이스이므로, IE10보다 낮은 브라우저는 위에서 소개 된 FormData의 방법에 대해서는 지원되지 않습니다 아래 그림 :

위는이 기사의 모든 내용입니다.