在JS/React中如何实现input[type='file']选中文件后执行指定代码？

核心逻辑是监听input[type="file"]的change事件，仅当用户完成文件选择、且文件列表非空时，才触发自定义业务代码，避免直接监听按钮点击事件导致的未选文件就执行逻辑的问题。

原生JavaScript实现 #

• HTML结构：隐藏原生input，使用自定义的「添加文件」按钮触发文件选择弹窗

<button id="selectFileBtn">添加文件</button>
<input type="file" id="fileInput" style="display: none;" multiple>

• JS逻辑：

const selectBtn = document.getElementById('selectFileBtn')
const fileInput = document.getElementById('fileInput')

// 点击自定义按钮唤起文件选择弹窗
selectBtn.addEventListener('click', () => {
  fileInput.click()
})

// 监听文件选择完成事件
fileInput.addEventListener('change', (e) => {
  const selectedFiles = e.target.files
  // 非空校验，过滤用户点取消的场景
  if (!selectedFiles || selectedFiles.length === 0) return

  // 此处写入你需要执行的特定代码
  console.log('已选中文件列表：', selectedFiles)

  // 可选：重置input值，支持重复选择同一个文件
  fileInput.value = ''
})

Vue框架实现 #

<template>
  <button @click="triggerFileSelect">添加文件</button>
  <input 
    ref="fileInputRef" 
    type="file" 
    style="display: none" 
    @change="handleFileSelect"
    multiple
  >
</template>

<script setup>
import { ref } from 'vue'
const fileInputRef = ref(null)

// 唤起文件选择弹窗
const triggerFileSelect = () => {
  fileInputRef.value.click()
}

// 处理选中文件后的逻辑
const handleFileSelect = (e) => {
  const selectedFiles = e.target.files
  if (!selectedFiles?.length) return

  // 此处写入特定业务代码
  console.log('已选中文件：', selectedFiles)

  // 可选：重置input支持重复选同文件
  e.target.value = ''
}
</script>

React框架实现 #

import { useRef } from 'react'

function FileUploadComponent() {
  const fileInputRef = useRef(null)

  // 唤起文件选择弹窗
  const triggerFileSelect = () => {
    fileInputRef.current?.click()
  }

  // 处理选中文件后的逻辑
  const handleFileSelect = (e) => {
    const selectedFiles = e.target.files
    if (!selectedFiles || selectedFiles.length === 0) return

    // 此处写入特定业务代码
    console.log('已选中文件：', selectedFiles)

    // 可选：重置input支持重复选同文件
    e.target.value = ''
  }

  return (
    <div>
      <button onClick={triggerFileSelect}>添加文件</button>
      <input
        ref={fileInputRef}
        type="file"
        style={{ display: 'none' }}
        onChange={handleFileSelect}
        multiple
      />
    </div>
  )
}

注意事项 #

• 禁止直接绑定「添加文件」按钮的点击事件执行业务逻辑，此时用户尚未完成文件选择，无法拿到有效文件数据
• change事件回调中必须加文件非空校验，过滤用户点击文件弹窗「取消」按钮的无效场景
• 有重复选择同一个文件的需求时，必须在逻辑执行完成后重置input的value属性为空，否则同一个文件第二次选择不会触发change事件

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