웹사이트에 파일을 업로드하는 것은 많은 웹 애플리케이션의 일반적인 요구 사항입니다.
사용자가 이 프로세스를 더 쉽게 수행할 수 있는 한 가지 방법은 파일 업로드를 위한 끌어서 놓기 인터페이스를 제공하는 것입니다.
JavaScript로 파일 업로드 끌어서 놓기 인터페이스를 만드는 방법을 살펴보겠습니다.
1단계: HTML File Input 만들기
만들기의 첫 번째 단계 끌어서 놓기 파일 업로드 인터페이스는 HTML File Input 을 만드는 것입니다.
이 요소를 사용하면 사용자가 기존 파일 선택 대화 상자를 사용하여 컴퓨터에서 파일을 선택할 수 있습니다.
Drag & Drop 인터페이스를 사용할 수 없는 사용자를 위해 이 요소를 대안으로 사용할 것입니다.
<input type="file" id="fileInput">
2단계: 드롭 영역 요소 생성
다음으로, 드롭 영역 요소를 생성해야 합니다.
새 HTML 요소를 만들고 끌어서 놓기 이벤트를 처리하도록 일부 이벤트 핸들러를 설정하여 이를 수행할 수 있습니다.
<html>
<div id="dropZone">Drop files here</div>
<script>
const dropZone = document.getElementById('dropZone');
dropZone.addEventListener('dragover', (event) => {
event.preventDefault();
});
dropZone.addEventListener('drop', (event) => {
event.preventDefault();
const files = event.dataTransfer.files;
handleFiles(files);
});위의 코드에서, 우리는 dropZone이라는 ID로 새로운 div 요소를 만듭니다.
그런 다음 드래그오버 및 드롭 이벤트에 대한 이벤트 리스너를 추가합니다.
드래그오버 이벤트는 브라우저의 기본 동작인 파일을 웹 페이지로 드롭하지 못하도록 방지하는 데 사용됩니다.
삭제 이벤트는 이벤트 개체의 dataTransfer 속성에서 삭제된 파일을 검색하는 데 사용됩니다.
3단계: 업로드된 파일 처리
파일이 있으면 적절하게 처리해야 합니다.
이 예에서는 단순히 파일 이름을 콘솔에 기록하지만 실제 애플리케이션에서는 파일에 대해 추가 처리를 수행해야 할 수 있습니다.
<script>
function handleFiles(files) {
for (const file of files) {
console.log(`File name: ${file.name}`);
}
}
4단계: 파일 입력 요소 처리
마지막으로, 드래그 앤 드롭 인터페이스를 사용할 수 없는 사용자를 위한 폴백으로 파일 입력 요소를 처리해야 합니다.
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (event) => {
const files = event.target.files;
handleFiles(files);
});위의 코드에서, 우리는 파일 입력 요소의 변경 이벤트에 대한 이벤트 리스너를 추가한다.
사용자가 파일 선택 대화상자를 사용하여 파일을 선택하면 변경 이벤트가 트리거되며,
이벤트 대상의 파일 속성을 사용하여 선택한 파일을 검색할 수 있습니다.
'dansoon-Dev > [Javascript]' 카테고리의 다른 글
| [Javascript] 클릭시 ImageDownload (0) | 2023.02.15 |
|---|
댓글