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

페이지에 파일을 놓을 때 파일 입력 값을 설정하는 방법은 무엇입니까?

사용자가 수동으로 선택하고 양식을 제출하기 위해 파일을 삭제하면 문제가 발생했습니다. 파일을 삭제할 때 파일 입력이 비어 있는 상태로 유지됩니다. 이전에는 프로그래밍 방식으로 파일 입력 값을 설정하는 것이 보안 문제로 인해 허용되지 않았지만 최신 브라우저에서는 이러한 취약점이 해결되었습니다.

해결책: DataTransfer 또는 FileList 활용

이제 파일 입력 값을 설정할 수 있습니다. 최신 브라우저에서는 dataTransfer 또는 FileList 객체를 활용합니다. 2017년 12월부터 Firefox 및 기타 주요 브라우저에서는 프로그래밍 방식의 파일 입력 조작을 허용합니다.

방법:

1. dragover 및 dragleave 이벤트의 기본 이벤트 동작을 방지하여 파일을 활성화합니다. 입력 상호 작용.

2. 드롭 중 이벤트:

   • fileInput.files를 e.dataTransfer.files에서 얻은 삭제된 파일과 동일하게 설정합니다. 이는 페이지에 놓은 파일을 파일 입력에 할당합니다.
3. 사용자가 드래그합니다.

예:

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

target.addEventListener('dragover', (e) => {
  e.preventDefault();
  body.classList.add('dragging');
});

target.addEventListener('dragleave', () => {
  body.classList.remove('dragging');
});

target.addEventListener('drop', (e) => {
  e.preventDefault();
  body.classList.remove('dragging');

  fileInput.files = e.dataTransfer.files;
});

참고: 이 방법은 최신 브라우저에서 작동하며 파일을 안전하게 처리하는 방법을 제공합니다. 드래그 앤 드롭 기능이 있는 입력.

위 내용은 드래그 앤 드롭을 사용하여 프로그래밍 방식으로 파일 입력 값을 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!