自定义文件输入按钮，创建一个不可见的输入文件类型 inside div inside button for file input

Question

我想制作一个文件输入按钮，就像亚马逊上的那个写评论，如下图所示

如果输入文件类型被隐藏，整个按钮怎么可能在点击时打开文件对话框？

我这里的代码隐藏了输入文件类型按钮，但没有打开文件对话框。它使用 React with tailwind 类

    <button
      type="button"
      className="p-6"
    >
      <div aria-label="Add a photo">
        <HiOutlinePlus className="text-4xl" />
        <input type="file" accept="image/*" className="hidden" />
      </div>
    </button>

Answer 1

How is it possible that the entire button opens up the file dialog on click if the input file type is hidden?

可能使用一个单独的小部件，然后在单击时打开隐藏文件输入，如下所示：

function openFileUpload() {
  document.getElementById("hiddenFile").click();
}

<button onclick="openFileUpload()" type="button">Visible Button</button>
<input type="file" id="hiddenFile" style="visibility:hidden">

自定义文件输入按钮，创建一个不可见的输入文件类型 inside div inside button for file input

custom file input button, creating an invisible input file type inside div inside button for file input

javascript

file

reactjs

tailwind-css