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

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

기존 파일 선택과 드래그를 모두 허용하는 파일 입력 컨트롤을 생성하는 경우 -and-drop의 경우, 파일 입력 필드가 삭제된 파일을 올바르게 반영하는지 확인하는 것이 중요합니다. 하지만 과거에는 보안 문제로 인해 JavaScript를 통한 파일 입력 값 설정이 제한되었습니다.

해결 방법

다행히 최신 브라우저에서는 이러한 보안 취약점을 해결하여 input[type="file"]의 파일 속성을 프로그래밍 방식으로 조정합니다. 이를 통해 파일 입력 필드에 파일을 놓는 효과를 시뮬레이션할 수 있습니다.

구현 세부 정보

1. 드래그 앤 드롭 이벤트 처리 : 이벤트 리스너를 사용하여 원하는 대상 요소(예: 컨테이너)에서 드래그 오버, 드래그-떠나기 및 드롭 이벤트를 모니터링합니다. 파일 입력 필드 주위).
2. 기본 동작 방지: 기본 드래그 앤 드롭 동작을 방지하여 사용자 정의로 처리합니다.
3. DataTransfer 또는 FileList에 액세스: 삭제된 파일의 경우 이벤트에 전달된 e 개체에서 dataTransfer 개체 또는 FileList를 가져옵니다. handler.
4. 파일 입력 필드 설정: 대상 파일 입력 필드의 files 속성을 3단계에서 얻은 dataTransfer.files 또는 FileList에 할당합니다. 이 작업은 파일 입력을 효과적으로 채웁니다. 필드에 삭제된 파일이 있습니다.

예 코드

다음은 파일을 페이지에 놓을 때 파일 입력 값을 설정하는 방법을 보여주는 JavaScript 코드 조각입니다.

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

// Configure drag and drop event listeners
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!