文件上传(input type="file")

文件上传(input type="file")

HTML中的文件上传功能通过<input type="file">元素实现，允许用户从本地设备选择文件并上传到服务器。这个表单控件在现代Web应用中广泛使用，从简单的图片上传到复杂的多文件批量传输场景都能胜任。

基本用法

最简单的文件上传表单只需要一个<input>元素和一个提交按钮：

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="myFile">
  <button type="submit">上传文件</button>
</form>

关键点说明：

• enctype="multipart/form-data"是必须的，它指定表单数据编码方式
• name属性用于服务器端识别文件字段
• 默认情况下只允许选择单个文件

多文件选择

添加multiple属性可以让用户一次选择多个文件：

<input type="file" name="files" multiple>

用户可以通过Ctrl/Command键或拖拽框选来选择多个文件。在JavaScript中可以通过files属性访问选中的文件列表：

document.querySelector('input[type="file"]').addEventListener('change', function(e) {
  console.log(`选中了${e.target.files.length}个文件`);
});

文件类型限制

使用accept属性可以限制用户只能选择特定类型的文件：

<!-- 只接受图片 -->
<input type="file" accept="image/*">

<!-- 指定具体MIME类型 -->
<input type="file" accept=".pdf,.doc,.docx">

<!-- 视频文件 -->
<input type="file" accept="video/*">

注意不同浏览器对这个属性的处理方式可能不同，服务器端验证仍然是必须的。

文件大小限制

虽然HTML没有直接限制文件大小的属性，但可以通过JavaScript实现：

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  const maxSize = 5 * 1024 * 1024; // 5MB
  
  if (file.size > maxSize) {
    alert('文件大小不能超过5MB');
    e.target.value = ''; // 清空选择
  }
});

拖放上传

现代浏览器支持拖放API，可以实现更友好的上传体验：

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

<script>
  const dropZone = document.getElementById('dropZone');
  
  dropZone.addEventListener('dragover', (e) => {
    e.preventDefault();
    dropZone.style.borderColor = 'blue';
  });

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

  dropZone.addEventListener('drop', (e) => {
    e.preventDefault();
    dropZone.style.borderColor = '#ccc';
    
    const files = e.dataTransfer.files;
    console.log('拖放了', files.length, '个文件');
    // 处理文件上传...
  });
</script>

预览上传的图片

对于图片文件，可以在上传前提供预览功能：

<input type="file" id="imageUpload" accept="image/*">
<img id="preview" src="#" alt="图片预览" style="max-width: 300px; display: none;">

<script>
  document.getElementById('imageUpload').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      
      reader.onload = function(event) {
        const preview = document.getElementById('preview');
        preview.src = event.target.result;
        preview.style.display = 'block';
      }
      
      reader.readAsDataURL(file);
    }
  });
</script>

使用FormData异步上传

现代Web应用通常使用AJAX而不是表单提交来上传文件：

const formData = new FormData();
formData.append('file', fileInput.files[0]);
formData.append('description', '这是一个测试文件');

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

进度显示

大文件上传时可以显示进度：

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

xhr.upload.onprogress = function(e) {
  if (e.lengthComputable) {
    const percent = Math.round((e.loaded / e.total) * 100);
    console.log(`${percent}% 已上传`);
    // 更新进度条UI
  }
};

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

xhr.send(formData);

安全性考虑

文件上传功能需要注意以下安全事项：

1. 服务器端验证文件类型和内容，不能仅依赖客户端验证
2. 限制上传文件大小
3. 上传的文件不要直接执行
4. 对上传的文件重命名，避免路径遍历攻击
5. 考虑使用CSRF令牌

移动端适配

在移动设备上，可以添加这些属性改善体验：

<input type="file" accept="image/*" capture="camera">

capture属性可以指定直接使用摄像头拍照上传：

• capture="camera" - 使用后置摄像头
• capture="user" - 使用前置摄像头

自定义样式

原生的文件输入框样式很难自定义，常见的解决方案是：

<label class="custom-file-upload">
  <input type="file"/>
  选择文件
</label>

<style>
  .custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    background: #f0f0f0;
    border-radius: 4px;
  }
  .custom-file-upload input[type="file"] {
    display: none;
  }
</style>

浏览器兼容性

虽然现代浏览器都支持文件上传，但需要注意：

• IE10+支持File API
• 移动浏览器对多文件选择支持不一致
• Safari对某些MIME类型的处理可能不同
• 旧版Android浏览器可能有文件大小限制

高级应用场景

对于更复杂的应用，可以考虑：

• 分片上传大文件
• 断点续传功能
• 客户端压缩图片
• Web Workers处理大文件
• 与IndexedDB结合实现离线上传队列

// 分片上传示例
async function uploadInChunks(file, chunkSize = 1024 * 1024) {
  const totalChunks = Math.ceil(file.size / chunkSize);
  
  for (let i = 0; i < totalChunks; i++) {
    const start = i * chunkSize;
    const end = Math.min(start + chunkSize, file.size);
    const chunk = file.slice(start, end);
    
    const formData = new FormData();
    formData.append('chunk', chunk);
    formData.append('chunkIndex', i);
    formData.append('totalChunks', totalChunks);
    formData.append('fileId', file.name + file.size);
    
    await fetch('/upload-chunk', {
      method: 'POST',
      body: formData
    });
    
    console.log(`上传进度: ${Math.round(((i + 1) / totalChunks) * 100)}%`);
  }
  
  console.log('所有分片上传完成');
}