javascript - 自定义文件上传按钮在 Microsoft Edge 中不起作用

Question

我正在尝试创建一个自定义图像上传按钮，据我测试，该按钮在 Chrome、Firefox 和 Opera 中运行良好，但在 Microsoft Edge 中不起作用。

这是一个示例:https://jsfiddle.net/k1xahf1k/2/

HTML 代码:

    <div class="row">
            <div class="form-group col-sm-3 col-sm-offset-2 col-xs-10">
                <input id="filename-upload" placeholder="Bild hochladen" disabled="disabled"/>
            </div>
            <div class="form-group mobile-col-1 col-xs-1">
                <label class="btn-file-upload">
                    <span class="glyphicon glyphicon-file"></span>
                    <input type="hidden" name="MAX_FILE_SIZE" value="1000000"/>
                    <input type="file" name="pictures" accept="image/*" hidden/>
                </label>
            </div>

            <div class="form-group col-sm-4 col-xs-12">
                <img id="preview" class="img-responsive img-preview" src="" alt=""/>
            </div>
        </div>

这是 CSS:

input {
     font-family: 'Open Sans', sans-serif;
     outline: 0;
     background: #f2f2f2;
     width: 100%;
     border: 0;
     margin: 0 0 15px;
     padding: 15px;
     box-sizing: border-box;
     font-size: 14px;
}

select::-ms-expand {
     display: none;
 }
select {
    -webkit-appearance: none;
    -moz-appearance: none;      
     appearance: none;
}
      .btn-file-upload {
     background-color: transparent;
     color: #FF9800;
     font-size: 40px;
     margin: 0;
     -webkit-transition: all 0.3s ease 0s;
     -moz-transition: all 0.3s ease 0s;
     -o-transition: all 0.3s ease 0s;
     transition: all 0.3s ease 0s;
     cursor: pointer;
}

[hidden] {
     display: none !important;
}

如果有人能帮助我解决这个问题，我会非常高兴。

Answer 1

Edge 不喜欢您的标签包含两个输入控件，即使其中一个是“隐藏”类型。如果将隐藏的文件移出，则会弹出打开文件对话框。请参阅此处的更改:https://jsfiddle.net/j257nepo/

<label class="btn-file-upload">
    <span class="glyphicon glyphicon-file"></span>
    <input type="file" name="pictures" accept="image/*" hidden/>
</label>
<input type="hidden" name="MAX_FILE_SIZE" value="1000000"/>