Colin's Blog
BOM을 활용한 브라우저의 파일 업로드 처리

개요

웹 애플리케이션에서 파일 업로드 기능은 매우 중요합니다. 사용자가 웹 페이지를 통해 파일을 선택하고 서버로 업로드해야하는 경우, 브라우저의 기능을 활용해야 합니다. 이번 글에서는 BOM(Browser Object Model)을 이용하여 브라우저에서의 파일 업로드 처리방법에 대해 알아보겠습니다.

HTML에서의 파일 선택과 업로드

HTML에서 파일 업로드를 위해 <input> 요소의 type 속성을 “file”로 설정해야합니다. 이렇게 설정된 <input> 요소에는 파일 선택 버튼이 표시되며, 사용자는 파일 시스템에서 원하는 파일을 선택할 수 있습니다.

<input type="file" id="fileInput">

파일 선택을 마친 후, 선택한 파일을 서버로 전송해야합니다. 이를 위해 <form> 요소를 사용하고, 해당 <form> 요소에는 action 속성과 method 속성을 설정해야합니다.

<form action="/upload" method="post">
  <input type="file" id="fileInput">
  <button type="submit">Upload</button>
</form>

위의 코드에서 action 속성은 파일을 전송할 서버의 경로이며, method 속성은 HTTP 요청 메서드를 나타냅니다. 일반적으로 파일 업로드 시 POST 메서드를 사용합니다.

JavaScript를 이용한 파일 업로드 처리

파일 업로드를 위한 JavaScript 코드는 BOM을 활용하여 파일 정보를 가져오고, 서버로 전송하는 역할을 합니다.

const fileInput = document.getElementById('fileInput');
const uploadButton = document.getElementById('uploadButton');
uploadButton.addEventListener('click', () => {
  const file = fileInput.files[0];
  const formData = new FormData();
  formData.append('file', file);
  
  fetch('/upload', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    // 업로드 결과 처리
    console.log(data);
    alert('파일이 성공적으로 업로드되었습니다.');
  })
  .catch(error => {
    // 업로드 오류 처리
    console.error(error);
    alert('파일 업로드 중에 오류가 발생했습니다.');
  });
});

위의 코드에서, fileInput은 파일 선택을 위한 <input> 요소를 나타내고, uploadButton은 서버로 파일을 업로드하기 위한 버튼입니다. uploadButton의 클릭 이벤트를 처리하기 위해 addEventListener 메서드를 사용합니다.

클릭 이벤트가 발생했을 때, fileInput.files[0]을 통해 선택한 파일의 정보를 가져옵니다. 이후, FormData 객체를 생성하고 append 메서드를 사용하여 파일을 FormData 객체에 추가합니다.

fetch 함수를 사용하여 파일을 서버로 전송하고, 서버의 응답을 처리합니다. 업로드 성공 시 then 블록에서 성공 메시지를 출력하고, 업로드 실패 시 catch 블록에서 오류 메시지를 출력합니다.

결론

BOM을 활용하여 브라우저에서의 파일 업로드 처리 방법을 알아보았습니다. HTML에서 파일 선택 및 업로드를 위한 요소와 JavaScript를 이용한 파일 업로드 처리 과정을 살펴보았습니다. 파일 업로드 기능은 다양한 웹 애플리케이션에서 매우 중요한 요소이므로, 실제 프로젝트에서 사용할 때 유용하게 활용할 수 있습니다.

참고 자료

© 2018 Colin. All rights reserved.