使用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 为现代浏览器提供进度反馈，确保与当前 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 应用程序。