[javascript] 자바스크립트로 파일 업로드 버튼 만들기

14 Dec 2023

javascript

파일을 업로드하는 인터페이스를 만들 때 자바스크립트를 사용하여 사용자가 파일을 선택하고 업로드하는 버튼을 만들 수 있습니다. 이 글에서는 자바스크립트를 사용하여 간단한 파일 업로드 버튼을 만드는 방법을 알아보겠습니다.

HTML 파일 준비하기

우선 HTML 파일을 작성하고 파일을 업로드할 기능이 들어갈 곳에 다음과 같은 코드를 추가합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>파일 업로드</title>
</head>
<body>
  <input type="file" id="fileInput">
  <button onclick="uploadFile()">업로드</button>
</body>
</html>

위 코드에서는 파일을 선택하는 부분에 input 요소를 사용하고, 업로드 버튼은 button 요소로 만들었습니다. 업로드 버튼을 클릭하면 uploadFile 함수가 호출될 것입니다.

자바스크립트 파일 작성하기

이제 자바스크립트 코드를 작성하여 파일을 업로드하는 동작을 구현할 차례입니다. 아래와 같이 자바스크립트를 추가해봅시다.

function uploadFile() {
  var fileInput = document.getElementById('fileInput');
  var file = fileInput.files[0];
  
  if (file) {
    var formData = new FormData();
    formData.append('file', file);
    
    // 여기서 파일을 업로드하는 AJAX 요청을 보낼 수 있습니다.
    // 예를 들어 jQuery AJAX를 사용하여 구현할 수 있습니다.
    // $.ajax({
    //   url: 'upload.php',
    //   type: 'POST',
    //   data: formData,
    //   processData: false,
    //   contentType: false,
    //   success: function(response) {
    //     // 업로드 완료 후 동작
    //   }
    // });
  }
}

위 코드에서는 uploadFile 함수 안에서 파일을 선택한 후, FormData를 사용하여 파일을 담아서 업로드할 준비를 합니다. 이후에는 AJAX 요청을 통해 파일을 서버에 업로드하고, 업로드가 완료된 후에는 적절한 동작을 수행합니다.

결론

이렇게 자바스크립트를 사용하여 파일 업로드 버튼을 만들고, 파일을 서버에 업로드하는 방법을 살펴보았습니다. 이 코드를 응용하여 더 다양하고 복잡한 파일 업로드 기능을 구현할 수 있습니다.

참고 문서: MDN Web Docs - FormData, jQuery AJAX