React JS + Bootstrap中如何修改Form Control文件选择按钮文本？

由于原生input[type="file"]的按钮文本由浏览器控制，Bootstrap官方没有直接提供修改选项，你可以通过以下两种方式实现自定义文本：

方法一：自定义按钮触发原生输入框（推荐，兼容性好） #

通过隐藏原生文件输入框，用自定义Bootstrap按钮替代，点击自定义按钮时触发原生输入框的选择事件：

import { Form } from 'react-bootstrap';
import { useState, useRef } from 'react';

function MediaUpload() {
  const [media, setmedia] = useState(null);
  const fileInputRef = useRef(null);

  // 触发原生文件选择框
  const triggerFileSelect = () => {
    fileInputRef.current?.click();
  };

  return (
    <Form.Group controlId="formFileMultiple" className="mb-3">
      <Form.Label>添加图片和视频</Form.Label>
      {/* 隐藏原生文件输入框 */}
      <Form.Control
        ref={fileInputRef}
        onChange={(e) => {
          console.log(e.target.files);
          setmedia(e.target.files);
        }}
        type="file"
        multiple
        className="d-none"
      />
      {/* 自定义选择按钮 */}
      <button type="button" className="btn btn-primary" onClick={triggerFileSelect}>
        选择图片/视频
      </button>
      {/* 可选：显示已选文件数量 */}
      {media && media.length > 0 && (
        <p className="mt-2 text-muted">已选择 {media.length} 个文件</p>
      )}
    </Form.Group>
  );
}

说明： #

• 用Bootstrap的d-none类隐藏原生输入框，不影响其功能
• 自定义按钮完全遵循Bootstrap样式，可根据需求修改className调整样式
• 可选添加已选文件提示，提升用户体验

方法二：通过CSS伪元素修改文本（兼容性有限） #

部分现代浏览器支持通过CSS伪元素覆盖默认按钮文本，模拟Bootstrap按钮样式：

/* 适配Chrome、Edge等WebKit内核浏览器 */
input[type="file"]::file-selector-button {
  visibility: hidden;
}
input[type="file"]::before {
  content: "选择图片/视频";
  display: inline-block;
  background-color: #0d6efd;
  color: #fff;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  cursor: pointer;
  font-weight: 400;
  line-height: 1.5;
}
input[type="file"]:hover::before {
  background-color: #0b5ed7;
}

/* 适配Firefox */
input[type="file"]::-moz-file-selector-button {
  visibility: hidden;
}
input[type="file"]::before {
  content: "选择图片/视频";
  display: inline-block;
  background-color: #0d6efd;
  color: #fff;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  cursor: pointer;
  font-weight: 400;
  line-height: 1.5;
}

说明： #

• 该方法无需修改JSX结构，但兼容性不如方法一（Safari等浏览器支持不佳）
• 需手动匹配Bootstrap按钮的颜色、内边距等样式，确保视觉统一

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