이 글은 기계 번역의 미러 문서이며, 원본 기사로 바로 이동하려면 여기를 클릭해 주세요.

보기: 13453|회답: 0

[Jquery] Javascrip{filter}t FormData 상세 및 사용법

[링크 복사]
게시됨 2018. 5. 8. 오후 4:30:39 | | |
FormData는 상세한 소개와 사용법을 제공합니다  https://developer.mozilla.org/zh ... ng_FormData_Objects

FormData의 방법과 이벤트는 이미 매우 명확하니 여기서 시간을 낭비하지 않겠습니다. 이 글에서는 주로 FormData 객체와 비동기 파일 업로드의 사용에 대해 설명합니다.

FormData 객체는 XMLHttpRequest 객체를 사용해 전송된 키-값 쌍 집합을 조직할 수 있게 해줍니다. 주로 양식 데이터를 전송하는 데 사용되지만, 양식을 통해 전송된 데이터와는 독립적으로 사용할 수 있습니다.

1. 처음부터 FormData 객체를 생성하기

자신만의 FormData 객체를 생성한 후, append() 메서드를 통해 객체에 키-값 쌍을 추가할 수 있습니다. 다음과 같이 말입니다:

참고: "userfile"과 "webmasterfile" 필드 모두 파일을 포함하고 있습니다. 필드 "accountnum"에 할당된 숫자는 FormData.append() 메서드를 통해 문자열로 직접 변환됩니다(필드 값은 블롭, 파일 또는 문자열일 수 있습니다: 값이 블롭도 파일도 아니면 문자열로 변환됩니다).
이 예시는 "username", "accountnum", "userfile", "webmasterfile" 필드로 구성된 FormData 인스턴스를 생성한 후, XMLHttpRequest 객체의 send() 메서드를 사용해 폼 데이터를 전송합니다. "webmasterfile" 필드는 블롭입니다. 블롭 객체는 파일 객체의 원시 데이터를 나타냅니다. 하지만 블롭이 나타내는 데이터가 반드시 자바스크립트 네이티브 형식일 필요는 없습니다. 파일 인터페이스는 블롭을 기반으로 하며, 블롭 기능을 계승하고 사용자 파일 시스템 지원을 확장합니다. 블롭을 구축하려면 Blob() 생성자를 호출할 수 있습니다.

2. HTML 폼에서 FormData 객체를 얻습니다

기존 폼 데이터를 포함하는 FormData 객체를 얻으려면, FormData 객체를 생성할 때 폼 요소를 지정해야 합니다.

이런 식으로:
FormData 객체를 얻은 후에는 다음과 같이 추가 데이터를 추가할 수도 있습니다:
이렇게 하면 사용자가 편집하지 않아도 전송 전에 추가 정보를 추가할 수 있습니다.

3. FormData 객체를 사용하여 파일을 전송합니다

FormData를 사용해 파일을 보낼 수 있습니다. 단순 <form>중간에는 <input>다음 원소가 포함될 수 있습니다:

그 후 다음 코드를 사용해 전송할 수 있습니다:
FormData 객체에 파일이나 블롭을 직접 추가할 수도 있습니다. 예를 들면 다음과 같습니다:
append() 메서드를 사용할 때, 세 번째 매개변수를 사용하여 파일 이름을 전송할 수 있습니다(Content-Disposition 헤더를 통해 서버에 전송). 세 번째 매개변수가 지정되어 있지 않거나 지원되지 않으면 세 번째 매개변수는 기본적으로 "blob"이 됩니다.

올바른 옵션을 설정하면 jQuery와 함께 사용할 수도 있습니다:







이전의:영어 어휘 103976 다운로드 (SQL 버전).
다음:.net/c# 서버의 컴퓨트 및 IO 속도를 테스트합니다
면책 조항:
Code Farmer Network에서 발행하는 모든 소프트웨어, 프로그래밍 자료 또는 기사는 학습 및 연구 목적으로만 사용됩니다; 위 내용은 상업적 또는 불법적인 목적으로 사용되지 않으며, 그렇지 않으면 모든 책임이 사용자에게 부담됩니다. 이 사이트의 정보는 인터넷에서 가져온 것이며, 저작권 분쟁은 이 사이트와는 관련이 없습니다. 위 내용은 다운로드 후 24시간 이내에 컴퓨터에서 완전히 삭제해야 합니다. 프로그램이 마음에 드신다면, 진짜 소프트웨어를 지원하고, 등록을 구매하며, 더 나은 진짜 서비스를 받아주세요. 침해가 있을 경우 이메일로 연락해 주시기 바랍니다.

Mail To:help@itsvse.com