将输入类型=文件替换为图像

Question

像很多人一样，我想自定义丑陋的 input type=file，并且我知道如果没有一些 hack 和/或 javascript 就无法完成。但是，问题是，就我而言，上传文件按钮仅用于上传图像（jpeg|jpg|png|gif），所以我想知道是否可以使用“clickable”图像与输入类型文件完全相同（显示对话框，并在提交的页面上显示相同的 $_FILE）。

我在这里找到了一些解决方法，这也很有趣（但不适用于 Chrome =/）。

当您想为文件按钮添加一些样式时，你们会怎么做？如果您对此有任何观点，请点击回答按钮;)

Answer 1

这对我来说非常有效：

.image-upload>input {
  display: none;
}

<div class="image-upload">
  <label for="file-input">
    <img src="https://icons.iconarchive.com/icons/dtafalonso/android-lollipop/128/Downloads-icon.png"/>
  </label>

  <input id="file-input" type="file" />
</div>

基本上，标签的 for 属性使得单击标签与单击指定的输入相同。

此外，将显示属性设置为 none 可以使文件输入根本不呈现，从而将其隐藏得干净整洁。

在 Chrome 中进行了测试，但根据网络，应该适用于所有主要浏览器。 :)

编辑： 此处添加了 JSFiddle： https://jsfiddle.net/c5s42vdz/