파일 업로드는 웹 애플리케이션에서 자주 사용되는 기능 중 하나입니다. 사용자가 파일을 선택하고 업로드하는 동작을 구현하려면 자바스크립트를 사용하여 이벤트를 처리해야 합니다. 우리는 이 블로그 포스트에서 자바스크립트로 파일 업로드 이벤트를 처리하는 방법에 대해 알아보겠습니다.

1. HTML 파일 입력 필드 생성

먼저, 파일 업로드를 위한 <input type="file"> 필드를 HTML에 추가해야 합니다.

<input type="file" id="fileInput" />
<button onclick="uploadFile()">업로드</button>

2. 파일 선택 이벤트 처리

다음으로, 파일을 선택했을 때 이를 감지하고 처리하는 자바스크립트 함수를 만들어야 합니다.

function handleFileSelect(event) {
  const files = event.target.files;
  // 선택한 파일에 대한 처리 로직을 추가합니다.
}
document.getElementById('fileInput').addEventListener('change', handleFileSelect);

3. 파일 업로드 처리

마지막으로, 파일을 서버로 업로드하는 로직을 추가해야 합니다. 이것은 서버측 코드와의 통합이 필요할 수 있습니다. 예를 들어 AJAX나 fetch API를 사용하여 파일을 서버로 전송할 수 있습니다.

function uploadFile() {
  const input = document.getElementById('fileInput');
  const file = input.files[0];

  const formData = new FormData();
  formData.append('file', file);

  fetch('/upload', {
    method: 'POST',
    body: formData
  })
  .then(response => {
    // 업로드 완료 후 처리할 로직을 추가합니다.
  })
  .catch(error => {
    // 에러 처리 로직을 추가합니다.
  });
}

위의 예시는 단순화된 형태의 파일 업로드 로직을 보여줍니다. 실제 파일 업로드 시 보안 및 에러 처리 등을 고려해야 합니다.

파일 업로드를 처리하는 자바스크립트 코드의 예시를 살펴보았습니다. 이를 통해 사용자가 웹 애플리케이션에서 파일을 선택하고 업로드하는 과정을 자바스크립트를 통해 어떻게 처리하는지에 대해 이해할 수 있었습니다.

참고문헌: MDN Web Docs, W3Schools