JavaScript/JavaScript 문법

[JavaScript]파일 업로드 구현

DevStory 2022. 1. 25.

이번 포스팅은 JavaScript에서 파일 업로드 구현하는 방법을 소개합니다.

HTML input 태그 작성

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

html 파일에서 input 태그를 작성 후 type = 'file'로 설정하고 input 태그의 id를 지정합니다. 하나 이상의 파일을 업로드해야 하는 경우 multiple='multiple' 속성을 추가합니다. 또한 이미지 유형에 대해 업로드하는 경우 accept 속성을 accept='image/*'와 같이 작성하며 파일 확장자를 jpg만 허용하는 경우 accept='.jpg'로 작성합니다.

JavaScript에서 이벤트 핸들러를 구현

const fileInput = document.getElementById("fileUpload");
// 또는 const fileInput = $("#fileUpload").get(0);

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

js 파일에서 이벤트 핸들러를 사용하여 파일을 선택한 경우 또는 파일이 변경된 경우 실행되는 함수를 구현합니다. JavaScript 또는 JQuery를 사용하여 input 태그의 id를 접근합니다. 이벤트 핸들러 내에서 files 속성의 첫 번째 파일을 가져옵니다.

파일을 선택하면 console에서 파일 정보를 볼 수 있습니다.

여러 파일을 선택하는 경우 html에서 input 태그에 multiple='multiple' 속성을 추가합니다.

그리고 이벤트 핸들러 함수를 다음과 같이 수정합니다.

const fileInput = document.getElementById("fileUpload");
// 또는 const fileInput = $("#fileUpload").get(0);

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

파일 선택창에서 파일을 여러 개 선택할 수 있으며, 3개의 파일을 선택한 경우 console에서 파일 3개의 정보를 볼 수 있습니다.

addEventListener() 함수를 사용하여 이벤트 핸들러를 추가합니다.

const fileInput = document.getElementById("fileUpload");
// 또는 const fileInput = $("#fileUpload").get(0);

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

fileInput.addEventListener("change", handleFiles);

선택한 파일의 정보

선택한 파일에는 여러가지 속성이 존재합니다.

name: 파일 이름으로 경로 정보는 없으며 읽기 전용입니다.
size: 정수형 파일의 크기이며 읽기 전용입니다.
type: 파일의 MIME 유형으로 파일의 유형을 알 수 없는 경우 빈 문자열입니다. 마찬가지로 읽기 전용입니다.

이미지 파일 보여주기

이미지 파일을 업로드 후 화면에 미리 보여줘야 하는 예제입니다.

html 파일을 다음과 같이 수정합니다.

<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <input type="file" id="fileUpload" accept='image/*' />
    <img id="previewImg" width="700" alt="이미지 영역" />
    <script src="src/index.js"></script>
  </body>
</html>

image 파일만 선택가능하므로 accept='image/*'로 수정하고 img 태그를 추가합니다.

js 파일을 다음과 같이 수정합니다.

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

const handleFiles = (e) => {
  const selectedFile = [...fileInput.files];
  const fileReader = new FileReader();

  fileReader.readAsDataURL(selectedFile[0]);

  fileReader.onload = function () {
    document.getElementById("previewImg").src = fileReader.result;
  };
};

fileInput.addEventListener("change", handleFiles);

파일을 선택 후 FileReader.readAsDataURL() 함수를 사용하여 특정 Blob 또는 File을 읽습니다. 그 후 파일의 내용을 img 태그의 src 속성에 반환합니다.

위 예제는 전부 JQuery를 사용하지 않고 JavaScript만 사용하였기 때문에 JavaScript 기반의 다른 웹 프레임워크에서 응용 가능합니다.

저작자표시 비영리 변경금지

'JavaScript > JavaScript 문법' 카테고리의 다른 글

[JavaScript]예외 처리(Exception Handling) (0)	2022.02.03
[JavaScript]파일 입출력 - FileReader 객체 (0)	2022.01.25
[JavaScript]exceljs 사용방법 및 엑셀 다운로드(내보내기) (0)	2022.01.25
[JavaScript]객체 배열 정렬하는 방법 (0)	2022.01.03
[JavaScript]소수점 반올림하는 방법 (0)	2021.12.24