파일 선택 기능을 구현하는 것은 웹 애플리케이션에서 자주 사용되는 기능 중 하나입니다. 사용자가 로컬에서 파일을 선택하고 업로드하는 기능을 구현할 때 자바스크립트를 사용할 수 있습니다.

HTML 파일 업로드 양식 생성

가장 먼저 파일을 선택할 수 있는 HTML 파일 업로드 양식을 생성해야 합니다. 아래는 간단한 파일 업로드 양식의 예시입니다.

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

위의 코드에서 input 요소의 type 속성을 "file"로 설정하여 파일을 선택할 수 있는 입력 필드를 만들었습니다. 또한 파일을 업로드할 때 호출될 uploadFile() 함수를 가지고 있는 버튼을 생성하였습니다.

자바스크립트로 파일 선택 처리

이제 자바스크립트를 사용하여 파일을 선택하고 처리하는 함수를 작성해야 합니다. 아래는 파일을 선택하고 선택한 파일의 정보를 콘솔에 출력하는 예시 코드입니다.

function uploadFile() {
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];
  console.log('선택한 파일:', file.name);
  console.log('파일 크기:', file.size, '바이트');
  console.log('파일 타입:', file.type);
}

위의 코드에서 getElementById 함수를 사용하여 파일 입력 필드의 요소를 가져온 후, 해당 요소의 files 속성을 사용하여 선택된 파일들의 목록 중 첫 번째 파일을 가져옵니다. 그런 다음 선택한 파일의 이름, 크기 및 타입을 콘솔에 출력합니다.

결론

이제 웹 애플리케이션에서 자바스크립트를 사용하여 파일을 선택하고 처리하는 방법에 대해 간단하게 알아보았습니다. 실제로 이러한 코드를 사용하여 파일 업로드 및 처리 기능을 보다 실용적으로 구현할 수 있습니다.

이제 파일 선택 및 업로드 작업에 대한 이해를 바탕으로 웹 애플리케이션 개발에 활용할 수 있을 것입니다.

자세한 정보는 MDN web docs를 참조하십시오.