JavaScript를 사용하여 파일 크기 제한 및 파일 업로드 진행률 피드백 구현

파일 업로드 제한 및 진행률 표시줄 구현

이 스크립트는 진행 보고서를 업로드하고 XMLHttpRequest 및 순수 JavaScript를 사용하여 파일 크기 제약 조건을 구현합니다. 성능 개선과 적절한 오류 처리도 보장됩니다.

// HTML form for file upload
<form id="uploadForm">
  <input type="file" id="fileInput" accept="image/*" required />
  <div id="progressContainer" style="display: none;">
    <progress id="uploadProgress" value="0" max="100"></progress>
    <span id="progressText"></span>
  </div>
  <button type="submit">Upload</button>
</form>
// JavaScript for file upload handling
<script>
document.getElementById('uploadForm').addEventListener('submit', function(event) {
  event.preventDefault(); // Prevent default form submission
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0]; // Get the selected file
  const maxSize = 2 * 1024 * 1024; // Maximum file size: 2MB
  if (file.size > maxSize) { // Check if file exceeds size limit
    alert('File size exceeds 2 MB. Please select a smaller file.');
    return; // Abort if the file is too large
  }
  const formData = new FormData(); // Prepare form data for upload
  formData.append('file', file);
  const progressContainer = document.getElementById('progressContainer');
  const uploadProgress = document.getElementById('uploadProgress');
  const progressText = document.getElementById('progressText');
  progressContainer.style.display = 'block'; // Show progress bar
  const xhr = new XMLHttpRequest(); // Create an XMLHttpRequest for upload
  xhr.open('POST', '/upload', true);
  xhr.upload.addEventListener('progress', function(e) {
    if (e.lengthComputable) { // Update progress
      const percentComplete = (e.loaded / e.total) * 100;
      uploadProgress.value = percentComplete;
      progressText.textContent = Math.round(percentComplete) + '% uploaded';
    }
  });
  xhr.onload = function() { // Handle the response
    if (xhr.status === 200) {
      console.log('Upload complete:', JSON.parse(xhr.responseText));
    } else {
      console.error('Upload failed:', xhr.statusText);
    }
  };
  xhr.send(formData); // Start file upload
});
</script>

Fetch API를 사용한 대체 파일 업로드 솔루션

이 솔루션은 파일 업로드 제한을 구현하고 Fetch API를 통해 최신 브라우저에 대한 진행률 피드백을 제공함으로써 현재 웹 기술과의 호환성을 보장합니다.

// HTML remains the same
// JavaScript with Fetch API
<script>
document.getElementById('uploadForm').addEventListener('submit', async function(event) {
  event.preventDefault();
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];
  const maxSize = 2 * 1024 * 1024;
  if (file.size > maxSize) {
    alert('File size exceeds 2 MB. Please select a smaller file.');
    return;
  }
  const progressContainer = document.getElementById('progressContainer');
  const uploadProgress = document.getElementById('uploadProgress');
  const progressText = document.getElementById('progressText');
  progressContainer.style.display = 'block';
  const formData = new FormData();
  formData.append('file', file);
  // Use fetch for upload
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
      const percentComplete = (e.loaded / e.total) * 100;
      uploadProgress.value = percentComplete;
      progressText.textContent = Math.round(percentComplete) + '% uploaded';
    }
  };
  xhr.send(formData);
});
</script>

JavaScript 파일 업로드에 관해 자주 묻는 질문

1. JavaScript에서 파일 크기를 어떻게 제한합니까?
2. 업로드 프로세스를 시작하기 전에 다음을 확인하세요. file.size 파일 크기 제한을 설정하기 위해 JavaScript의 속성을 확인합니다. 크기가 제한보다 큰 경우 양식 제출을 중지하세요.
3. 파일 업로드에 Fetch API를 사용할 수 있나요?
4. 물론, fetch() 파일 업로드에 사용할 수 있습니다. 그러나 진행 상황 추적은 더욱 어려워집니다. 것보다 더 많은 해결 방법이 필요합니다. 2.
5. 업로드하는 동안 진행률 표시줄을 어떻게 표시합니까?
6. 모니터링함으로써 xhr.upload.addEventListener('progress') 업로드 진행률에 대한 정보를 제공하는 이벤트에서는 진행률 표시줄을 표시할 수 있습니다.
7. 클라이언트측 파일 크기 검증이 중요한 이유는 무엇입니까?
8. 사용자는 클라이언트 측 파일 크기 검증을 통해 즉각적인 응답을 받게 되며, 이를 통해 큰 파일에 대한 불필요한 서버 쿼리를 피할 수 있습니다. 하지만 security, 항상 서버 측 유효성 검사와 쌍을 이루십시오.
9. 파일 업로드에 실패하면 어떻게 되나요?
10. 그만큼 onload 또는 onerror 의 이벤트 2 개체를 사용하여 업로드 실패를 식별하고 이에 따라 사용자에게 경고할 수 있습니다.

파일 업로드 프로세스 마무리

실시간 진행률 표시를 제공하고 업로드할 수 있는 파일 크기를 제한하는 것은 원활한 사용자 경험을 보장하는 데 중요합니다. 이는 사용자가 업로드 상태를 인식하고 큰 파일이 시스템에 과부하를 주지 않도록 보장합니다.

JavaScript를 사용하면 이러한 전략을 적용하여 개발자의 보안과 성능을 최적화할 수 있습니다. 진행률 표시줄은 사용자 참여를 향상시키고 크기 제한은 특정 위험으로부터 보호합니다. 이러한 권장 사례를 사용하면 효과적이고 사용하기 쉬운 웹 애플리케이션을 만드는 데 도움이 됩니다.