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

你可以只使用标签和标签中的属性，并为输入类型=＆＃39;文件＆＃39;并用风格无隐藏。

Answer 2

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"/>

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

2 个答案: