我需要单击自定义按钮打开文件资源管理器，以便我可以选择一个文件。并且该文件名必须出现在 INPUT 字段中

Posted 2023-03-06

【中文标题】我需要单击自定义按钮打开文件资源管理器，以便我可以选择一个文件。并且该文件名必须出现在 INPUT 字段中

【英文标题】：I need to open the the file explorer on the click of a CUSTOM BUTTON so that i can select a file. And that file name has to appear in the INPUT field

【发布时间】：2021-12-27 05:45:15

【问题描述】：

以下是代码，因此单击按钮时，Windows 资源管理器必须打开，并且从 Windows 资源管理器中选择了任何文件。需要在 INPUT 中显示。文件类型不应为“文件”

<Grid.Column width=8>    
<Input placeholder='File Name - (automatically pick up from file)' fluid style=marginBottom:'15px'/>
<Button content='Browse files' onClick=onButtonClick size='medium' basic color='blue' icon='download'/>
</Grid.Column> 

【参考方案1】：

您可以使用文件输入并将其放置在按钮标签内，您可以自定义该标签以显示您想要的外观。在文件输入上放置一个 ref。当您点击按钮时，您可以调用文件输入的 click() 方法，这将打开文件资源管理器。您可以使用文件输入的files 属性选择文件并将其设置为变量。

export default function App() 
  const fileRef = React.useRef();
  let [file, setFile] = React.useState();
  const handleChange = (event) => 
    setFile(event.target.files[0]);
  ;

  return (
    <div>
      <button onClick=() => fileRef.current.click()>
        <input id="upload" name="upload" type="file" ref=fileRef hidden
          onChange=handleChange />
        Upload File
      </button>
       file &&  file!==undefined && file!==null &&
        <div>
          <p>file.name</p>
          <p>file.size</p>
          <p>file.type</p>
        </div>
          
    </div>
  );

查看this link 了解更多您可以访问的文件属性