FormData에 대해
xmlhttprequest 레벨 2는 새로운 인터페이스를 추가했습니다 --- formdata
FormData 객체를 사용하면 JS를 통해 일부 키 값 쌍으로 일련의 양식 컨트롤을 시뮬레이션 할 수 있습니다. xmlhttprequest의 send () 메소드를 사용하여 양식을 비동기 적으로 제출할 수 있습니다. 일반적인 Ajax와 비교할 때 FormData를 사용하는 가장 큰 장점은 이진 파일을 비동기 적으로 업로드 할 수 있다는 것입니다.
FormData 객체
FormData 객체는 모든 양식 요소의 이름과 값의 쿼리 스트링을 형성하여 배경에 제출할 수 있습니다. FormData 객체를 사용하면 ajax를 사용하여 제출할 때 스티칭 쿼리 스트링의 작업량을 줄일 수 있습니다.
QueryString은 쿼리 문자열입니다. http query 문자열은 URL에서 왔습니까? 다음 값이 지정됩니다
페이지의 양식이 GET 모드에서 요청 된 데이터를 페이지로 전송하면 (데이터에 안전하지 않은 문자가 포함 된 경우 브라우저는 먼저 16 진 문자로 변환 한 다음 공간이 %20으로 변환 될 때와 같이 전송됩니다) 웹 서버는 요청 된 데이터를 query_string이라는 환경 변수로 배치합니다. request.querystring 방법은이 환경 변수에서 해당 값을 꺼내어 16 진수로 변환 한 문자를 복원하는 것입니다.
FormData를 사용하여 파일과 사진을 업로드하십시오
FormData 빈 객체를 작성한 다음 Append 메소드를 사용하여 키/값을 추가하십시오.
var formdata = new FormData (); formdata.append ( "이름", "Zhang San");
이미 양식 양식이있는 경우 양식 개체를 가져 와서 파라미터로 FormData 객체로 전달하십시오.
<! docType html> <html> <head> <meta charset = "utf-8"/> <title> </title> </head> <body> <form name = "form1"id = "form1"> <입력 ID = "파일"파일 "파일"이름 = "name"> </input> </form 형식> var ""text/var " form = document.getElementById ( "form1"); var formdata = 새로운 formdata (form); </script> </body> </html>
기존 양식 데이터를 기반으로 새로운 키 값 쌍을 계속 추가 할 수 있습니다.
var formdata = new FormData (); formdata.append ( "Age", "21");
FormData 객체를 사용하여 파일을 업로드하십시오
var formdata = new FormData ($ ( "#form1"). //formdata.append("file ", $ ("#file ") Content-Type 요청 헤더 성공 : function () {} error : function () {}})위의 내용은 FormData를 사용하여 편집자가 소개 한 JS에서 파일과 사진을 업로드하는 방법에 대한 완전한 설명입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨주세요!