問題描述

我有一個按鈕”Choose file” 如下 (我正在使用玉，但它應該與 Html5 相同)：

 input(type='file', name='videoFile')

在瀏覽器中，它顯示了一個帶有文字旁邊的按鈕 「無檔案選擇」 。我想將 「沒有檔案選擇」 文字改為其他的東西，如 「沒有選擇影片」 或 「請選擇一個影片」 。我在這裡遵循了第一個建議：

I don’t want to see ‘no file chosen’ for a file input field

但是這樣做並沒有改變文字：

 input(type='file', name='videoFile', title = "Choose a video please")

有誰能幫我弄清問題在哪裡？

最佳解決思路

我很確定您不能更改按鈕上的預設標籤，它們是瀏覽器中的 hard-coded(每個瀏覽器以自己的方式呈現按鈕標題) 。看看這個 button styling article

次佳解決思路

用 css 隱藏輸入，新增一個標籤並將其分配給輸入按鈕。標籤可以點選，點選後會彈出檔案對話方塊。

<input type="file" id="files" class="hidden"/>
<label for="files">Select file</label>

然後如果需要，將標籤作為按鈕進行樣式化。

第三種解決思路

http://jsfiddle.net/ZDgRG/

見上面的連結。我使用 CSS 隱藏預設文字，並使用標籤來顯示我想要的內容：

<div><input type='file' title="Choose a video please" id="aa" onchange="pressed()"><label id="fileLabel">Choose file</label></div>

input[type=file]{
    width:90px;
    color:transparent;
}

window.pressed = function(){
    var a = document.getElementById('aa');
    if(a.value == "")
    {
        fileLabel.innerHTML = "Choose file";
    }
    else
    {
        var theSplit = a.value.split('\');
        fileLabel.innerHTML = theSplit[theSplit.length-1];
    }
};

第四種思路



$(function () {
     $('input[type="file"]').change(function () {
          if ($(this).val() != "") {
                 $(this).css('color', '#333');
          }else{
                 $(this).css('color', 'transparent');
          }
     });
})
input[type="file"]{
    color: transparent;
}
<script src="https://googleajax.admincdn.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" name="app_cvupload" class="fullwidth input rqd">

第五種思路

但是如果您嘗試刪除此工具提示

<input type='file' title=""/>

這不工作。這是我工作的小技巧，嘗試用空格標題。它會工作:)

<input type='file' title=" "/>

第六種思路

對，即使你有一個 pre-upload 檔案的列表，沒有辦法刪除這個’ 沒有檔案選擇’ 。

我發現最簡單的解決方案 (在 IE，FF，CR 上工作) 如下

  1. 隱藏您的輸入並新增一個’files’ 按鈕

  2. 然後呼叫’files’ 按鈕，並要求他繫結 fileupload(我在這個例子中使用 JQuery)



$('.addfiles').on('click', function() { $('#fileupload').click();return false;});
<button class="addfiles">Add Files</button>
<input id="fileupload" type="file" name="files[]" multiple style='display: none;'>

完成了，完美的工作:)

弗雷德

第七種思路

這樣的事情可以工作

input(type='file', name='videoFile', value = "Choose a video please")

第八種思路

嘗試這只是一個技巧

<input type="file" name="uploadfile" id="img" style="display:none;"/>
<label for="img">Click me to upload image</label>

怎麼執行的

這很簡單 Label 元素使用”for” 標記透過 id 引用表單的元素。在這種情況下，我們使用”img” 作為它們之間的參考鍵。一旦完成，每當您點選標籤時，它會自動觸發窗體的元素單擊事件，這是我們的檔案元素單擊事件。然後，我們使用 display：none，而不是 visibility：hidden 來使檔案元素不可見，因此它不會建立空格。

享受編碼

參考文獻

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。