html - 隐藏文件输入元素在 IE Edge 上不起作用

Question

我创建了以下内容，其中按下一个图标来启动上传过程，而不是通常的 browse...。它适用于 Chrome、FireFox，我相信旧版本的 IE(我使用 IE 的文档模式对其进行了测试)，但 Edge 除外。在 IE Edge 上单击图标时没有任何反应。

我该怎么做才能让它在 Chrome、Firefox、IE Edge 以及至少 IE 10 和 9 中运行？

结果:https://jsfiddle.net/sk5cg2wy/

/* Upload Photo */

.upload-wrapper {
  width: 250px;
  height: 250px;
  margin: 0 auto;
}

.upload-wrapper img {
  width: 250px
    height: 280px;
  cursor: pointer;
}

.upload-wrapper input {
  display: none;
}

<!-- start upload wrapper -->
<div class='upload-wrapper'>
  <form enctype='multipart/form-data' action='photo_setup.php' method='POST'>
    <label for='file-input'>
      <img src='http://i.imgur.com/MIY6LmH.png' alt='Upload File' title='Upload File' width='250' height='250'>
    </label>
    <input type='file' name='photo' id='file-input' accept='image/*'>
  </form>
</div>
<!-- end upload wrapper -->

Answer 1

IE-Edge 的奇怪行为不知道这是存在的。

您可以尝试将图像作为 background-image 添加到标签中，我已经在 IE-Edge (Windows 7) 中对其进行了测试并且可以正常工作。

JSFiddle

HTML:

<!-- start upload wrapper -->
<div class='upload-wrapper'>
    <form enctype='multipart/form-data' action='photo_setup.php' method='POST'>
        <label for='file-input'>
      <!--<img src='http://i.imgur.com/MIY6LmH.png' alt='Upload File' title='Upload File' width='250' height='250'>-->
        </label>
        <input type='file' name='photo' id='file-input' accept='image/*'>
    </form>
</div>
<!-- end upload wrapper -->

CSS: /* 上传照片 */

.upload-wrapper {
     width: 250px;
     height: 250px;
     margin: 0 auto;
}

.upload-wrapper img {
     width: 250px
     height: 280px;
     cursor: pointer;
}

[for="file-input"] {
     display: block;
     background-color: #ddd; /*as fallback*/
     background: url(http://i.imgur.com/MIY6LmH.png);
     background-repeat: no-repeat;
     background-size: cover;
     width: 250px;
     height: 250px;
}

.upload-wrapper input {
     display: none;
}