js实现上传文件

2026-02-28 21:17:57JavaScript

使用input元素上传文件

在HTML中创建一个类型为file的input元素，用户可通过点击按钮选择文件：

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

通过JavaScript获取文件对象：

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  console.log('Selected file:', file.name, file.size, file.type);
});

通过FormData上传文件

使用FormData对象构建表单数据，适合通过AJAX上传：

const formData = new FormData();
formData.append('file', fileInput.files[0]);

fetch('/upload', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(data => console.log('Upload success:', data))
.catch(error => console.error('Error:', error));

拖放文件上传

实现拖放区域接收文件：

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

JavaScript处理拖放事件：

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

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

dropArea.addEventListener('drop', (e) => {
  e.preventDefault();
  dropArea.style.borderColor = '#ccc';
  const files = e.dataTransfer.files;
  if(files.length) {
    console.log('Dropped file:', files[0].name);
  }
});

文件预览与验证

预览图片文件：

const preview = document.getElementById('preview');
const reader = new FileReader();

reader.onload = (e) => {
  preview.src = e.target.result;
};
reader.readAsDataURL(fileInput.files[0]);

验证文件类型和大小：

const MAX_SIZE = 5 * 1024 * 1024; // 5MB
const ALLOWED_TYPES = ['image/jpeg', 'image/png'];

if(!ALLOWED_TYPES.includes(file.type)) {
  alert('仅支持JPEG/PNG格式');
  return;
}
if(file.size > MAX_SIZE) {
  alert('文件大小不能超过5MB');
  return;
}

分片上传大文件

实现文件分片上传：

const CHUNK_SIZE = 1 * 1024 * 1024; // 1MB
let offset = 0;

function uploadChunk(file, chunk) {
  const formData = new FormData();
  formData.append('chunk', chunk);
  formData.append('offset', offset);
  formData.append('fileId', Date.now());

  return fetch('/upload-chunk', {
    method: 'POST',
    body: formData
  });
}

while(offset < file.size) {
  const chunk = file.slice(offset, offset + CHUNK_SIZE);
  await uploadChunk(file, chunk);
  offset += CHUNK_SIZE;
}

进度监控

显示上传进度：

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

xhr.open('POST', '/upload', true);
xhr.send(formData);

浏览器兼容性处理

对于不支持FormData的旧浏览器：

js实现上传文件

if(window.FormData) {
  // 使用FormData上传
} else {
  // 使用iframe或base64编码方式
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = () => {
    const base64Data = reader.result.split(',')[1];
    // 发送base64数据
  };
}