如何更改「選擇文件」或「瀏覽」按鈕文本和「沒有文件選擇」文本。例如：

我有以下的HTML代碼顯示「瀏覽」或「選擇文件」按鈕：如何更改「選擇文件」或「瀏覽」按鈕文本和「沒有文件選擇」文本。例如：

<input type="file" name="file" id="file">

來源

2016-11-30 Swati Systematix

[如何更改?]「的按鈕文本的可能重複（https://stackoverflow.com/questions/1944267/how-to-change-the-button-text- of-input-type-file） – Bae

而是改變輸入元素的文本和默認參數嘗試使用一種變通方法。

<div class="file"> 
    <label for="file-input">Pick a file</label> 
    <input type="file" id="file-input"> 
</div>

，並通過風格的設計吧：

.file { position: relative; height: 30px; width: 100px; } 
.file > input[type="file"] { position: absoulte; opacity: 0; top: 0; left: 0; right: 0; bottom: 0 } 
.file > label { position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-color: #666; color: #fff; line-height: 30px; text-align: center; cursor: pointer; }

Working Demo

來源

2016-11-30 11:47:34

感謝您的回覆。你的代碼改變了按鈕的文本，但它完全覆蓋了它的默認行爲。我無法看到我選擇的文件。 –

您創建一個div用一個按鈕和一個跨度：

<div> 
<input type="button" onclick="document.getElementById('fu').click()" 
value="Click to select file" /> 
<span id="fileName"></span> 
</div>

而且把可見的div只是您的文件上傳名爲'fu'

<input type="file" id="fu" onchange="FileSelected()" style="width: 0;">

，並添加這個腳本：

function FileSelected(e) 
{ 
    file = document.getElementById('fu').files[document.getElementById('fu').files.length - 1]; 
    document.getElementById('fileName').innerHtml= file.name; 
}

而且你喜歡file.type和file.size另一個有用的東西來展示。

來源

2016-11-30 14:22:02

您可能會增加.file > label { width: 113px; }的width，並將opacity: 0;放入.file > input[type="file"]。

來源

2017-03-29 13:46:05 HGO

如何更改「選擇文件」或「瀏覽」按鈕文本和「沒有文件選擇」文本。例如：

回答

相關問題