드래그 앤 드롭을 사용하여 입력 파일의 값을 자동으로 채우려면 어떻게 해야 합니까?

페이지에서 드래그 앤 드롭 시 입력 파일 값을 자동으로 채우는 방법

배경:

보안상의 이유로 이전에는 JavaScript를 사용하여 입력 파일의 값을 프로그래밍 방식으로 설정하는 것이 불가능했습니다. 그러나 브라우저 기술의 발전으로 상황이 바뀌었습니다.

해결책:

1단계: 파일 삭제 활성화

원하는 항목에 드래그 앤 드롭 이벤트 리스너를 추가하세요. 컨테이너:

const target = document.getElementById("container");

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

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

2단계: 파일 값 할당

dataTransfer 이벤트에서 FileList 객체 캡처:

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

  const files = e.dataTransfer.files;
  document.getElementById("file-input").files = files;
});

"컨테이너 교체 "를 드래그 앤 드롭을 활성화하려는 컨테이너 요소의 ID로, "file-input"을 입력의 ID로 사용 파일 요소입니다.

참고:

이 방법은 해당 사양을 지원하는 최신 브라우저에서 작동합니다.

위 내용은 드래그 앤 드롭을 사용하여 입력 파일의 값을 자동으로 채우려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!