> 웹 프론트엔드 > JS 튜토리얼 > JavaScript에서 FormData의 FileList 길이를 프로그래밍 방식으로 설정하고 업데이트하는 방법은 무엇입니까?

JavaScript에서 FormData의 FileList 길이를 프로그래밍 방식으로 설정하고 업데이트하는 방법은 무엇입니까?

Mary-Kate Olsen
풀어 주다: 2024-12-10 22:07:14
원래의
361명이 탐색했습니다.

How to Programmatically Set and Update FileList Length for FormData in JavaScript?

FormData 개체에 대한 FileList의 파일 개체 및 길이 설정

문제 설명:

파일 개체를 어떻게 설정할 수 있습니까? FileList 객체의 길이 속성을 업데이트하고 변경 사항이 해당 FormData에 반영되는지 확인합니다. object?

해결책:

의 .files 속성을 설정할 수 있습니다. 요소를 FileList 객체에 추가하지만 .files.length 속성은 초기에 0으로 설정되어 있습니다. 또한 양식이 제출되면 File 객체의 크기 속성이 0으로 설정될 수 있습니다.

이러한 문제를 해결하려면 , DataTransfer 생성자를 활용할 수 있습니다. DataTransfer 객체를 사용하면 DataTransferItemList를 통해 액세스할 수 있는 변경 가능한 FileList 객체를 생성할 수 있습니다. 변경 가능한 FileList 객체가 있으면 File 객체를 설정하고 그에 따라 길이 속성을 업데이트할 수 있습니다.

이 기술을 구현하는 방법은 다음과 같습니다.

const input = document.createElement("input");
input.type = "file";
input.name = "files";
input.multiple = true;

const dT = new DataTransfer();
dT.items.add(new File(['foo'], 'programmatically_created.txt'));

input.files = dT.files;
로그인 후 복사

이 코드 스니펫은 새 <입력 유형="파일"> 요소와 DataTransfer 객체. 그런 다음 DataTransfer 개체에 파일을 추가하고 입력 요소의 .files 속성을 DataTransfer 개체의 FileList 개체로 설정합니다.

이제 입력 요소의 .files 속성에 액세스하면 다음과 같은 작업이 수행됩니다. DataTransfer 개체를 통해 설정된 File 개체에 액세스할 수 있으며 FileList 개체의 .length 속성이 올바르게 설정됩니다.

또한, 양식이 제출되면 파일 객체의 크기 속성이 올바른 값으로 설정됩니다. 이 접근 방식을 사용하면 FileList 개체에 대한 변경 사항이 양식과 함께 제출된 FormData 개체에 반영됩니다.

위 내용은 JavaScript에서 FormData의 FileList 길이를 프로그래밍 방식으로 설정하고 업데이트하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿