드래그 앤 드롭 후 프로그래밍 방식으로 파일 입력 값을 설정하는 방법은 무엇입니까?

페이지 드롭 시 파일 입력 값 설정

배경

파일 선택 및 제출이 가능한 컨트롤을 작업 중입니다. 지정된 장소에 떨어지면서. 그러나 양식을 수동으로 제출할 때까지 파일 입력이 비어 있는 것을 알 수 있습니다.

해결책: JavaScript에서 파일 객체 설정

다행히 최신 브라우저에서는 이제 프로그래밍 방식 설정이 허용됩니다. files 속성을 사용하여 입력 파일을 저장합니다. 데이터 전송을 사용하여 이를 구현하는 방법은 다음과 같습니다.

let target = document.documentElement;
let fileInput = document.querySelector('input');

target.addEventListener('drop', (e) => {
  e.preventDefault();
  fileInput.files = e.dataTransfer.files;
});

대체 방법: FileList

FileList에서 파일 입력 값을 설정할 수도 있습니다. 개체:

let fileInput = document.querySelector('input');

fileInput.files = [file1, file2, ...];

면책조항

입력 파일 값을 설정하는 기능은 데이터 전송 또는 사용 가능한 FileList 개체에 따라 다릅니다. 이 기능과 관련된 기존 보안 위험은 최신 브라우저에서 해결되었습니다.

예

아래 제공된 코드 조각에서 데모를 찾을 수 있습니다.

let fileInput = document.querySelector('input');</p><p>target.addEventListener('drop', (e) => {<br> e.preventDefault();<br> fileInput.files = e.dataTransfer.files;<br>});