js 实现文件上传

2026-02-28 22:38:01JavaScript

文件上传的基本实现

使用HTML的<input type="file">元素配合JavaScript的FormData对象实现基础文件上传。

<input type="file" id="fileInput">
<button onclick="uploadFile()">上传</button>

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

  if (!file) {
    alert('请选择文件');
    return;
  }

  const formData = new FormData();
  formData.append('file', file);

  fetch('/upload', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => console.log('上传成功:', data))
  .catch(error => console.error('上传失败:', error));
}
</script>

多文件上传处理

通过设置multiple属性允许选择多个文件，使用循环处理文件列表。

js 实现文件上传

<input type="file" id="multiFileInput" multiple>
<button onclick="uploadMultipleFiles()">批量上传</button>

<script>
function uploadMultipleFiles() {
  const fileInput = document.getElementById('multiFileInput');
  const files = fileInput.files;

  if (files.length === 0) {
    alert('请选择文件');
    return;
  }

  const formData = new FormData();
  for (let i = 0; i < files.length; i++) {
    formData.append(`files_${i}`, files[i]);
  }

  fetch('/multi-upload', {
    method: 'POST',
    body: formData
  })
  .then(/* 处理响应 */);
}
</script>

上传进度监控

利用XMLHttpRequest对象的upload事件监听上传进度。

function uploadWithProgress(file) {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload');

  xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
      const percent = Math.round((e.loaded / e.total) * 100);
      console.log(`上传进度: ${percent}%`);
    }
  };

  xhr.onload = function() {
    console.log('上传完成');
  };

  const formData = new FormData();
  formData.append('file', file);
  xhr.send(formData);
}

文件类型和大小验证

在上传前对文件进行客户端验证。

js 实现文件上传

function validateAndUpload(file) {
  // 允许的文件类型
  const allowedTypes = ['image/jpeg', 'image/png'];
  // 最大5MB
  const maxSize = 5 * 1024 * 1024;

  if (!allowedTypes.includes(file.type)) {
    alert('仅支持JPEG和PNG格式');
    return;
  }

  if (file.size > maxSize) {
    alert('文件大小不能超过5MB');
    return;
  }

  // 验证通过后上传
  uploadFile(file);
}

拖放上传实现

通过监听拖放事件实现拖拽上传功能。

<div id="dropZone" style="border: 2px dashed #ccc; padding: 20px;">
  拖放文件到这里上传
</div>

<script>
const dropZone = document.getElementById('dropZone');

dropZone.addEventListener('dragover', (e) => {
  e.preventDefault();
  dropZone.style.borderColor = 'blue';
});

dropZone.addEventListener('dragleave', () => {
  dropZone.style.borderColor = '#ccc';
});

dropZone.addEventListener('drop', (e) => {
  e.preventDefault();
  dropZone.style.borderColor = '#ccc';

  const files = e.dataTransfer.files;
  if (files.length > 0) {
    uploadFile(files[0]);
  }
});
</script>

使用第三方库实现

利用如Dropzone.js等第三方库简化实现。

<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css">
<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>

<form action="/upload" class="dropzone" id="myDropzone"></form>

<script>
Dropzone.options.myDropzone = {
  paramName: "file",
  maxFilesize: 5, // MB
  acceptedFiles: "image/*",
  dictDefaultMessage: "拖放文件或点击上传",
  dictFileTooBig: "文件过大 ({{filesize}}MB). 最大: {{maxFilesize}}MB."
};
</script>