Question

我创建了以下内容，其中按下图标以启动上传过程而不是通常的browse...。它适用于Chrome，FireFox，我相信IE的旧版本（我使用IE＆＃39;文档模式测试它）除了Edge。在IE Edge上单击图标时没有任何反应。

我可以做些什么才能让它在Chrome，Firefox，IE Edge以及至少IE 10和9中运行？

＆＃13;

/* 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;
}

＆＃13;

<!-- 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 -->

＆＃13;

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;
}

Answer 2

@Konrud已经写了一个解决方法，但它没有修复/解释实际问题。据我所分析，它不起作用，因为标签不是块元素，因此不占用空间。 Edge实际上表现正常。添加显示块，它将起作用（也在其他浏览器中表现＆＃34;正确＆＃34;：

label {
  display: block;
}

隐藏文件输入元素无法在IE Edge

2 个答案: