如何使用原生JS让Div模拟Input File按钮实现文件上传功能

核心思路 #

我们可以通过隐藏原生的<input type="file">元素，用自定义的<div>作为触发按钮：点击div时调用原生input的点击事件，同时监听input的文件选择事件来获取选中的文件，完美替代原生文件上传按钮的功能。

实现步骤 #

1. HTML结构 #

先创建一个自定义的div按钮和一个隐藏的文件输入框：

<div class="custom-file-upload">
  <span>选择文件</span>
</div>
<input type="file" id="hidden-file-input" multiple />

• multiple属性允许用户选择多个文件，不需要的话可以直接移除。

2. CSS样式 #

对div进行样式美化，并隐藏原生input：

.custom-file-upload {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f5f5f5;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  transition: background-color 0.2s;
}

.custom-file-upload:hover {
  background-color: #e8e8e8;
}

/* 基础隐藏方案 */
#hidden-file-input {
  display: none;
}

/* 可选：无障碍优化方案（避免屏幕阅读器忽略元素） */
/* #hidden-file-input {
  position: absolute;
  left: -9999px;
  top: -9999px;
} */

3. JavaScript逻辑 #

用原生JS绑定事件，实现div触发文件选择和文件选中后的处理：

// 获取页面元素
const customUploadBtn = document.querySelector('.custom-file-upload');
const fileInput = document.getElementById('hidden-file-input');

// 点击自定义按钮时，触发原生文件输入框的点击事件
customUploadBtn.addEventListener('click', () => {
  fileInput.click();
});

// 监听文件选择事件，处理选中的文件
fileInput.addEventListener('change', (event) => {
  const selectedFiles = event.target.files;
  
  if (selectedFiles.length > 0) {
    // 示例：更新按钮文本为选中的文件名
    const fileNames = Array.from(selectedFiles).map(file => file.name).join(', ');
    customUploadBtn.querySelector('span').textContent = `已选择：${fileNames}`;
    
    // 这里可以添加文件上传逻辑，比如用FormData发送到服务器
    // const formData = new FormData();
    // for (const file of selectedFiles) {
    //   formData.append('files', file);
    // }
    // fetch('/upload-api', { method: 'POST', body: formData });
  } else {
    // 未选择文件时恢复原按钮文本
    customUploadBtn.querySelector('span').textContent = '选择文件';
  }
});

关键说明 #

• 原生input的files属性是一个FileList对象，可通过遍历获取每个选中的File实例，包含文件名、大小、类型等核心信息。
• 样式可以完全自定义，根据你的项目需求调整颜色、尺寸、圆角等细节。
• 如果需要上传文件，推荐使用FormData对象包装文件，再通过fetch或XMLHttpRequest发送到后端接口。

内容的提问来源于stack exchange，提问作者modih65067