h5实现文件上传

2026-01-13 23:02:40HTML

实现文件上传的基本方法

使用HTML5的<input type="file">元素是最简单的文件上传方式。通过设置multiple属性可以实现多文件选择。

<input type="file" id="fileInput" multiple>
<button onclick="uploadFiles()">上传文件</button>

获取文件对象

通过JavaScript的File API可以获取用户选择的文件列表。每个文件对象包含名称、大小、类型等信息。

function uploadFiles() {
  const fileInput = document.getElementById('fileInput');
  const files = fileInput.files;

  for (let i = 0; i < files.length; i++) {
    console.log(`文件名: ${files[i].name}, 大小: ${files[i].size}字节`);
  }
}

使用FormData发送文件

XMLHttpRequest或Fetch API配合FormData对象可以实现文件上传，支持多文件同时上传。

function uploadFiles() {
  const formData = new FormData();
  const files = document.getElementById('fileInput').files;

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

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

显示上传进度

通过XMLHttpRequest的progress事件可以实时显示上传进度，提升用户体验。

const xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', function(e) {
  const percent = Math.round((e.loaded / e.total) * 100);
  console.log(`上传进度: ${percent}%`);
});

文件预览功能

在文件上传前，可以使用FileReader对象实现图片预览功能。

function previewImage(file) {
  const reader = new FileReader();
  reader.onload = function(e) {
    const img = document.createElement('img');
    img.src = e.target.result;
    document.body.appendChild(img);
  };
  reader.readAsDataURL(file);
}

文件类型和大小验证

在上传前进行文件验证可以避免无效上传，节省带宽。

function validateFile(file) {
  const validTypes = ['image/jpeg', 'image/png'];
  const maxSize = 2 * 1024 * 1024; // 2MB

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

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

  return true;
}

拖放上传实现

HTML5的拖放API可以让用户通过拖拽文件到指定区域实现上传。

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

<script>
  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;
    // 处理上传逻辑
  });
</script>

分片上传大文件

对于大文件，可以采用分片上传策略，提高上传成功率。

function uploadInChunks(file) {
  const chunkSize = 1 * 1024 * 1024; // 1MB分片
  let offset = 0;

  while (offset < file.size) {
    const chunk = file.slice(offset, offset + chunkSize);
    const formData = new FormData();
    formData.append('chunk', chunk);
    formData.append('name', file.name);
    formData.append('offset', offset);

    fetch('/upload_chunk', {
      method: 'POST',
      body: formData
    });

    offset += chunkSize;
  }
}