js实现上传文件

2026-04-03 21:42:29JavaScript

上传文件的基本实现

使用HTML的<input type="file">元素结合JavaScript的File API可以实现文件上传功能。

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

function uploadFile() {
  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));
  }
}

多文件上传

修改<input>元素的multiple属性可以支持多文件选择。

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

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

  if (files.length > 0) {
    const formData = new FormData();
    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));
  }
}

文件预览

在文件上传前，可以使用FileReader API预览文件内容。

function previewFile() {
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];
  const preview = document.getElementById('preview');

  if (file) {
    const reader = new FileReader();

    reader.onload = function(e) {
      if (file.type.startsWith('image/')) {
        preview.innerHTML = `<img src="${e.target.result}" alt="预览">`;
      } else {
        preview.textContent = '不支持预览此文件类型';
      }
    };

    reader.readAsDataURL(file);
  }
}

文件类型和大小限制

可以在客户端对文件类型和大小进行验证。

function validateFile() {
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];
  const maxSize = 5 * 1024 * 1024; // 5MB

  if (!file) return false;

  const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf'];
  if (!allowedTypes.includes(file.type)) {
    alert('不支持的文件类型');
    return false;
  }

  if (file.size > maxSize) {
    alert('文件大小超过限制');
    return false;
  }

  return true;
}

进度显示

使用XMLHttpRequest可以显示上传进度。

function uploadWithProgress() {
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];
  const progressBar = document.getElementById('progressBar');

  if (file) {
    const xhr = new XMLHttpRequest();
    const formData = new FormData();
    formData.append('file', file);

    xhr.upload.onprogress = function(e) {
      if (e.lengthComputable) {
        const percentComplete = (e.loaded / e.total) * 100;
        progressBar.value = percentComplete;
      }
    };

    xhr.onload = function() {
      if (xhr.status === 200) {
        console.log('上传成功');
      } else {
        console.error('上传失败');
      }
    };

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

拖放上传

实现拖放区域来上传文件。

js实现上传文件

<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 > 0) {
    const formData = new FormData();
    formData.append('file', files[0]);

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