[javascript] 자바스크립트로 파일 업로드 실패 시 오류 메시지 표시하기

14 Dec 2023

javascript

먼저, HTML 파일에 파일 업로드를 위한 <input type="file"> 요소를 추가합니다.

<!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>
  <div id="errorContainer"></div>

  <script>
    function uploadFile() {
      var fileInput = document.getElementById('fileInput');
      var file = fileInput.files[0];

      if (!file) {
        displayError('파일을 선택해 주세요.');
        return;
      }

      // 파일 업로드 로직 추가
      // ...

      // 만약 업로드 실패 시
      // 실패를 나타내는 오류 메시지 표시
      // 예를 들어, "파일 업로드에 실패했습니다." 메시지를 표시
      displayError('파일 업로드에 실패했습니다.');
    }

    function displayError(message) {
      var errorContainer = document.getElementById('errorContainer');
      errorContainer.innerText = message;
    }
  </script>
</body>
</html>

위의 예제 코드에서는 파일을 선택하고 “파일 업로드” 버튼을 클릭할 때 uploadFile 함수가 호출됩니다. 이 함수는 선택한 파일을 가져와서 업로드 작업을 수행합니다. 만약 파일을 선택하지 않고 업로드 버튼을 클릭하면 displayError 함수를 사용하여 오류 메시지를 표시합니다.

이와 같은 방식으로 자바스크립트를 사용하여 파일 업로드 시 발생하는 오류를 사용자에게 표시할 수 있습니다.