[JavaScript] 파일 업로드 기능 구현

1. HTML input 태그

 

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

<input type="file" id="fileInput" accept="image/*" /> <!--이미지 파일만 선택-->
<input type="file" id="fileInput" accept=".jpg,.png" /> <!--파일 형식 제한--> 

<input type="file" multiple id="fileInput" /> <!--다중 파일 선택-->

 

 input 태그의 file 타입을 사용하면 파일 선택 다이얼로그가 열리고 사용자는 로컬 파일 시스템에서 원하는 파일을 선택할 수 있습니다.

• 파일 업로드 : 선택한 파일은 웹 서버로 업로드됩니다. 폼태그의 'action' 속성에 지정된 URL로 파일이 전송되며, 서버 측에서는 이 파일을 처리하고 저장할 수 있습니다.
• 파일 형식 제한 : 'accept' 속성을 사용하여 특정 파일 형식만 선택할 수 있도록 제한할 수 있습니다. 
• 다중 파일 선택 : 'multiple'속성을 사용하여 다중 파일 선택을 지원할 수 있습니다.
• 파일 정보 확인 : JavaScript를 사용하여 선택한 파일의 정보를 확인할 수 있습니다. 'FileReader' 객체를 사용하여 파일 이름, 크기, 유형등의 정보에 접근할 수 있습니다.
• 폼과 함께 제출 : 파일 선택 태그는 폼 안에 포함되어야 하며, 폼이 제출될 때 파일도 함께 서버로 전송됩니다.

 

 

 

 

2. JavaScript 이벤트 핸들러

 

2-1. addEventListner를 사용한 경우

// 파일 입력 요소 가져오기
const fileInput = document.getElementById('fileInput');

// 파일 선택 시 이벤트 처리
fileInput.addEventListener('change', (event) => {
  const selectedFiles = event.target.files; // 선택한 파일들을 가져옵니다.

  if (selectedFiles.length > 0) {
    // 여기서 선택한 파일들을 원하는 방식으로 처리할 수 있습니다.
    // 예를 들어, 파일 정보를 확인하거나 파일을 업로드할 수 있습니다.
    for (const file of selectedFiles) {
      console.log('파일 이름:', file.name);
      console.log('파일 크기:', file.size);
      console.log('파일 유형:', file.type);
    }
  }
});

 

 위 코드에서 fileInput은 <input type="file"> 태그를 JavaScript에서 가져온 것입니다. addEventListener를 사용하여 파일 입력 요소에 'change' 이벤트를 등록합니다. 파일 선택 시 이벤트가 발생하면 선택한 파일들은 event.target.files를 통해 가져올 수 있습니다. 이후 선택한 파일들을 원하는 방식으로 처리하면 됩니다.

 예제 코드에서는 간단하게 선택한 파일들의 이름, 크기, 유형을 콘솔에 출력하고 있습니다. 파일을 업로드하거나 다른 작업을 수행하려면 해당 부분을 원하는 로직으로 대체하면 됩니다.

※ event.target - 이벤트가 일어날 객체를 말한다

 

 

2-2. onchange를 사용한 경우

const fileInput = document.getElementById("fileUpload");

fileInput.onchange = () => {
  const selectedFile = fileInput.files[0];
  console.log(selectedFile);
};

const fileInput = document.getElementById("fileUpload");

fileInput.onchange = () => {
  const selectedFile = [...fileInput.files];
  console.log(selectedFile);
};

 

 

 

 

3. FileReader 객체로 화면에 이미지 보여주기

 

 FileReader 객체를 사용하여 업로드한 이미지를 화면에서 확인할 수 있습니다.

 

3-1. HTML

<input type="file" id="imageInput" accept="image/*">
<div id="imageContainer"></div>

 

 

3-2. JavaScript

// 이미지 업로드 input 요소, 이미지 컨테이너 요소 가져오기
const imageInput = document.getElementById('imageInput');
const imageContainer = document.getElementById('imageContainer');

imageInput.addEventListener('change', function (event) {
  const selectedFile = event.target.files[0];

  const reader = new FileReader(); // FileReader 객체 생성

  reader.onload = function () { // FileReader 로드 이벤트 핸들러 등록
    const imageElement = document.createElement('img'); // 이미지 엘리먼트 생성
    imageElement.src = reader.result; // 이미지 경로 설정
    imageElement.style.width = '300px'; // 이미지 스타일 설정 (예시로 너비 300px로 설정)
    imageContainer.appendChild(imageElement); // 이미지 컨테이너에 이미지 엘리먼트 추가
  };

  reader.readAsDataURL(selectedFile); // FileReader로 선택된 파일 읽기
});

 

 

 위의 코드는 이미지를 선택한 후 해당 이미지를 화면에 보여주는 간단한 예제입니다. 'imageInput'은 이미지를 업로드하는 input 요소를 나타내고, 'imageContainer'는 이미지를 보여주는 컨테이너를 나타냅니다. 사용자가 이미지를 선택하면 FileReader 객체를 사용하여 해당 이미지를 읽고, 이미지 경로를 설정한 후 이미지 엘리먼트를 동적으로 생성하여 'imageContainer'에 추가합니다.

 

 

 

 

4. 서버로 업로드

 

4-1. HTML

<input type="file" id="imageInput" accept="image/*">
<button id="uploadButton">Upload</button>
<div id="imageContainer"></div>

 

 

4-2. JavaScript

const imageInput = document.getElementById('imageInput');
const imageContainer = document.getElementById('imageContainer');
const uploadButton = document.getElementById('uploadButton'); // 업로드 버튼 요소 가져오기

let selectedFile; // 이미지 선택 시 파일 객체를 저장할 변수

imageInput.addEventListener('change', function (event) {
  selectedFile = event.target.files[0];
});

// 업로드 버튼에 클릭 이벤트 핸들러 등록
uploadButton.addEventListener('click', function () {

  const formData = new FormData(); // FormData 객체 생성
  formData.append('file', selectedFile); // 선택된 파일을 FormData에 추가
  
  // AJAX를 이용하여 서버로 파일 전송
  fetch('/upload', {
    method: 'POST',
    body: formData,
  })
    .then(response => response.json())
    .then(data => {
      // 서버로부터 받은 응답을 처리하는 코드
      console.log(data);
    })
    .catch(error => {
      // 에러 처리
      console.error(error);
    });
});

 

 위의 코드는 선택된 파일을 서버로 업로드하는 예제입니다. 'uploadButton'을 클릭하면 AJAX를 이용하여 FormData에 선택된 파일을 추가하고, 서버로 전송합니다. 서버는 해당 파일을 받아서 처리하고, 클라이언트로 응답을 보낼 수 있습니다. 서버 측에서는 해당 요청을 받아 파일을 저장하고, 필요한 처리를 수행하는 코드가 구현되어야 합니다.

 

 

 

 

출처 : https://developer.mozilla.org/en-US/docs/Web/API/FileReader