js 实现文件上传

2026-01-16 12:44:16JavaScript

文件上传的基本实现

使用HTML的<input type="file">元素配合JavaScript的File API可以实现文件上传功能。以下是一个基础示例：

<input type="file" id="fileInput">
<button id="uploadButton">上传</button>

document.getElementById('uploadButton').addEventListener('click', function() {
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];

  if (file) {
    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));
  }
});

多文件上传

通过添加multiple属性可以实现多文件选择：

js 实现文件上传

<input type="file" id="fileInput" multiple>

const fileInput = document.getElementById('fileInput');
const files = fileInput.files;

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

进度显示

使用XMLHttpRequest可以获取上传进度：

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);

xhr.upload.onprogress = function(e) {
  if (e.lengthComputable) {
    const percentComplete = (e.loaded / e.total) * 100;
    console.log(percentComplete + '% 已上传');
  }
};

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

xhr.send(formData);

文件预览

在上传前预览图片文件：

js 实现文件上传

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(e) {
  const file = e.target.files[0];
  const reader = new FileReader();

  reader.onload = function(event) {
    const img = document.createElement('img');
    img.src = event.target.result;
    document.body.appendChild(img);
  };

  reader.readAsDataURL(file);
});

文件验证

验证文件类型和大小：

const file = fileInput.files[0];
const validTypes = ['image/jpeg', 'image/png'];
const maxSize = 2 * 1024 * 1024; // 2MB

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

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

拖放上传

实现拖放文件上传功能：

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

const dropArea = document.getElementById('dropArea');

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

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

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

  const files = e.dataTransfer.files;
  if (files.length) {
    // 处理上传逻辑
  }
});