js实现文件

2026-04-05 09:26:46JavaScript

文件上传基础实现

使用HTML的<input type="file">元素配合JavaScript实现基础文件上传功能：

<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;
  }

  console.log('文件名:', file.name);
  console.log('文件大小:', file.size);
  console.log('文件类型:', file.type);
}
</script>

文件预览功能

在客户端实现图片预览功能：

function previewImage() {
  const fileInput = document.getElementById('fileInput');
  const preview = document.getElementById('preview');

  const file = fileInput.files[0];
  const reader = new FileReader();

  reader.onload = function(e) {
    preview.src = e.target.result;
  };

  reader.readAsDataURL(file);
}

多文件上传处理

处理多个文件的选择和上传：

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

  for (let i = 0; i < files.length; i++) {
    console.log(`文件${i+1}:`, files[i].name);
  }
}

文件下载实现

使用Blob对象实现文件下载：

function downloadFile() {
  const content = '这是要下载的文件内容';
  const blob = new Blob([content], { type: 'text/plain' });
  const url = URL.createObjectURL(blob);

  const a = document.createElement('a');
  a.href = url;
  a.download = 'example.txt';
  a.click();

  URL.revokeObjectURL(url);
}

文件拖放功能

实现拖放区域接收文件：

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

dropArea.addEventListener('dragover', (e) => {
  e.preventDefault();
  dropArea.classList.add('highlight');
});

dropArea.addEventListener('dragleave', () => {
  dropArea.classList.remove('highlight');
});

dropArea.addEventListener('drop', (e) => {
  e.preventDefault();
  dropArea.classList.remove('highlight');

  const files = e.dataTransfer.files;
  console.log('拖放的文件:', files);
});

文件分块上传

实现大文件分块上传：

async function uploadInChunks(file) {
  const CHUNK_SIZE = 1024 * 1024; // 1MB
  const totalChunks = Math.ceil(file.size / CHUNK_SIZE);

  for (let chunkNumber = 0; chunkNumber < totalChunks; chunkNumber++) {
    const start = chunkNumber * CHUNK_SIZE;
    const end = Math.min(start + CHUNK_SIZE, file.size);
    const chunk = file.slice(start, end);

    await uploadChunk(chunk, chunkNumber, totalChunks, file.name);
  }
}

function uploadChunk(chunk, chunkNumber, totalChunks, fileName) {
  const formData = new FormData();
  formData.append('chunk', chunk);
  formData.append('chunkNumber', chunkNumber);
  formData.append('totalChunks', totalChunks);
  formData.append('fileName', fileName);

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

文件类型验证

验证上传文件的类型：

function validateFileType(file, allowedTypes) {
  const fileType = file.type;
  const isValid = allowedTypes.includes(fileType);

  if (!isValid) {
    alert(`不支持的文件类型: ${fileType}`);
    return false;
  }

  return true;
}

// 使用示例
const allowedTypes = ['image/jpeg', 'image/png'];
const file = document.getElementById('fileInput').files[0];
validateFileType(file, allowedTypes);

文件进度监控

监控文件上传进度：

js实现文件

function uploadWithProgress(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;
      console.log('上传进度:', percentComplete + '%');
    }
  };

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

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