js 实现input file

2026-04-04 03:34:21JavaScript

使用 `<input type="file">` 实现文件上传

HTML 提供原生文件上传控件，通过 <input type="file"> 实现：

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

监听文件选择事件

通过 change 事件获取用户选择的文件：

document.getElementById('fileInput').addEventListener('change', function(event) {
  const files = event.target.files;
  console.log(files); // FileList 对象
});

处理多文件选择

添加 multiple 属性允许选择多个文件：

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

限制文件类型

通过 accept 属性限制可上传的文件类型：

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

<!-- 指定具体格式 -->
<input type="file" accept=".pdf,.doc,.docx" />

读取文件内容

使用 FileReader API 读取文件内容：

const reader = new FileReader();
reader.onload = function(e) {
  console.log(e.target.result); // 文件内容
};
reader.readAsText(files[0]); // 以文本形式读取

显示文件预览

对于图片文件，可以生成预览：

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

上传文件到服务器

使用 FormData 和 fetch 上传文件：

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

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

自定义样式

原生文件输入框样式受限，可通过以下方式自定义：

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

.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}
input[type="file"] {
  display: none;
}

文件验证

在客户端验证文件大小和类型：

js 实现input file

const file = files[0];
if (file.size > 5 * 1024 * 1024) {
  alert('文件大小不能超过5MB');
  return;
}

if (!file.type.match('image.*')) {
  alert('请选择图片文件');
  return;
}