是的--你可以隐藏input type="file"，但仍然在你的标记中。然后你在你的页面上显示一个普通的按钮，当你点击这个按钮时，你通过编程触发了你实际文件输入的click事件：

<input id="fileInput" type="file" style="display:none;" />
<input type="button" value="Choose Files!" onclick="document.getElementById('fileInput').click();" />

小提琴

您可以使用按钮和隐藏文件元素
第一个

当类型是按钮时，无法真正打开文件对话框。默认情况下，只能使用type=“button”，当鼠标悬停在按钮上时，类型将更改为type='file'，如下所示：

<input type="button" class="file" name="attachement" onmouseover="(this.type='file')" onmouseout="(this.type='button')" value="Choose file" />

要打开文件对话框，需要输入文件。
在这里，您可以在单击按钮时打开它，而无需编写任何JavaScript代码。

<button type="button">
  <label for="file">
    Open File Dialog
  </label>
</input>
<input type="file" id="file" style="display:none;"/>

这个解决方案的要点是使用label元素和它的for属性。你应该让标签覆盖整个按钮，以给予一个完美的解决方案。

no。input的type属性指定您正在处理的元素类型（即：复选框、单选框、按钮、提交等），因此如果您希望打开文件对话框，则必须明确说明文件。如果您希望使用按钮，则将输入类型指定为按钮。
这并不是说您可以做一些变通办法，但是将输入类型设置为按钮不可能强制文件对话框单独关闭该按钮。

因此，我想避免输入的html中的类型文件，所以我被迫在运行时更改此类类型

<input id="fileInput" type="button" style="display:none;" />
<input type="button" value="Choose Files!" onfocus="document.getElementById('fileInput').type='file'" onclick="document.getElementById('fileInput').click();" />

在React中，这是如何完成的

const inputer = useRef()
 function ClickComponent(){
   return <div>
       <input ref={inputer} />
       <button onClick={inputer.current.click()}>Click me </button>
   </div>
 }