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>

フェッチ API を使用した代替ファイル アップロード ソリューション

このソリューションは、ファイルのアップロード制限を実装し、Fetch API を介して最新のブラウザーに進行状況のフィードバックを提供することにより、現在の Web テクノロジーとの互換性を確保します。

// 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 を使用してこれらの戦略を適用すると、開発者のセキュリティとパフォーマンスが最適化されます。プログレスバーによりユーザーエンゲージメントが向上し、サイズ制限により特定の危険が防止されます。これらの推奨プラクティスを使用すると、効果的で使いやすい Web アプリケーションを作成するのに役立ちます。