파일 업로드는 웹 애플리케이션 개발에서 자주 사용되는 기능 중 하나입니다. 이번 포스트에서는 자바스크립트와 JSON 데이터를 활용하여 파일 업로드 기능을 생성하는 방법을 알아보겠습니다.

HTML 파일 업로드 폼 생성하기

먼저 HTML 파일에 파일 업로드 폼을 생성합니다. 다음과 같이 <form> 태그와 <input> 태그를 활용하여 파일을 업로드할 수 있는 폼을 만들 수 있습니다.

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="file" id="file-upload">
  <button type="submit">업로드</button>
</form>

위의 예시에서는 <form> 태그의 action 속성을 업로드 기능을 처리할 서버의 엔드포인트로 설정합니다. method 속성은 업로드를 처리하기 위한 HTTP 메서드로 post를 사용합니다. enctype 속성은 폼 데이터를 서버로 전송할 때 사용되는 인코딩 방식입니다. 파일 업로드에는 multipart/form-data를 사용해야 합니다. <input> 태그의 type 속성을 file로 지정하여 파일을 선택할 수 있는 인풋 필드를 생성합니다.

자바스크립트로 파일 데이터 처리하기

이제 파일을 선택하고 업로드 버튼을 클릭했을 때, 선택한 파일의 데이터를 처리할 수 있도록 자바스크립트 코드를 작성해보겠습니다. 다음은 ES6의 fetch API를 이용한 예시입니다.

// 파일 업로드 이벤트 핸들러 등록하기
document.getElementById('file-upload').addEventListener('change', handleFileUpload);

// 파일 업로드 처리 함수
function handleFileUpload(event) {
  const file = event.target.files[0];

  // 파일 데이터를 JSON 형식으로 변환
  const fileData = {
    name: file.name,
    type: file.type,
    size: file.size
  };

  // 서버로 파일 데이터 전송
  fetch('/upload', {
    method: 'POST',
    body: JSON.stringify(fileData),
    headers: {
      'Content-Type': 'application/json'
    }
  })
  .then(response => response.json())
  .then(data => {
    // 서버의 응답 처리
    console.log(data);
  })
  .catch(error => {
    // 에러 처리
    console.error(error);
  });
}

위의 예시에서는 파일 선택 인풋 필드의 change 이벤트에 handleFileUpload 함수를 등록합니다. handleFileUpload 함수는 이벤트 객체로부터 선택된 파일을 가져와 JSON 데이터로 변환한 뒤, fetch를 사용하여 서버로 파일 데이터를 전송합니다. 서버의 응답은 JSON 형태로 받아와서 필요한 작업을 처리할 수 있습니다.

서버측 처리

서버 측에서는 업로드된 파일을 받아와 원하는 처리를 수행해야 합니다. 이 부분은 서버 언어 및 프레임워크에 따라 다르므로 자세한 내용은 이 포스트에서 다루지 않겠습니다.

마무리

이번 포스트에서는 자바스크립트와 JSON 데이터를 이용하여 파일 업로드 기능을 생성하는 방법을 알아보았습니다. 파일 업로드는 웹 애플리케이션에서 자주 사용되기 때문에, 이를 구현하고 이해하는 것은 중요한 기술적 요소입니다. 이 포스트가 도움이 되었기를 바랍니다!

#javascript #파일업로드