自定義文件上傳按鈕不工作在微軟邊緣

我試圖創建一個自定義圖片上傳按鈕，它在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; 
}

我會很高興，如果有人可以幫助我這個。

來源

2017-10-16 pete

邊緣不喜歡標籤包含兩個輸入控件的事實，即使其中一個屬於「隱藏」類型。如果您將隱藏的文件移出，則會彈出打開的文件對話框。看到這裏的變化：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"/>

來源

2017-10-16 17:10:06 DocMax

您可以在標籤中使用標籤以及屬性，併爲input type ='file'提供一個id，並將其隱藏爲樣式none。

來源

2017-10-16 17:03:22

您可以參考此答案https://stackoverflow.com/questions/572768/styling-an-input-type-file-button?rq=1 –

自定義文件上傳按鈕不工作在微軟邊緣

回答

相關問題