反正從類型=文件輸入中刪除「no file selected」？

Question

無論如何，我似乎無法弄清楚刪除選中的「No file selected」文本，該文本顯示在type =「file」的輸入旁邊。

你們知道嗎？

Answer 1

沒有跨瀏覽器的方式來做到這一點。 「no file selected」文本位於widget的實現定義部分，我不相信大多數瀏覽器提供的瀏覽器特定定製方式都很多。另一方面，當value屬性爲空時，您可以簡單地使用CSS來覆蓋文本。

Answer 2

您可以通過定義輸入的寬度並隱藏超出的內容（不需要的「沒有文件選擇」文本）來達到此目的。

input { 
    width: 132px; 
    overflow:hidden; 
} 

Here is the demonstration on jsfiddle。

注意：每種語言都有其自己的默認文本，並且可能會呈現不同的輸入大小。 In brazilian portuguese 132px的寬度很好！

我的回答是基於this similar question on stackoverflow。

Answer 3

這是一個非常好的黑客和它的更清潔。

HTML

<div id="file_info' style='display:inline;'>Browse</div> 
<input type="file" name='file[]' multiple style='opacity: 0;' onchange='displayFileName()'/> 

JS

function displayFileName() { 
    var files = $('input[type="file"]')[0].files; 
    document.getElementById('file_info').innerHTML = files.length + " images to upload";` 
} 

Answer 4

CSS 
<style> 
#image_file{ 
    position: relative; 
    width: 188px; 
    border: 1px solid #BBB; 
    margin: 1px; 
    cursor: pointer; 
    float: left; 
    } 
</style> 

HTML 
<input id="image_file" onclick="getFile()" onfocus="this.blur()" value=""/> 
<div style='height: 0px;width: 0px; overflow:hidden;'> 
    <input type="file" id="PinSpot_file"> 
</div> 
<input type="button" onclick="getFile()" style="background-color: #DDD;" value="Browser" > 


JAVASCRIPT 
function getFile(){ 
    document.getElementById("PinSpot_file").click(); 
} 

// Event when change fields 
$('#PinSpot_file').live('change', function(e) {  
    var file = this.value; 
    var fileName = file.split("\\"); 
    document.getElementById("image_file").value = fileName[fileName.length-1]; 

    //AJAX 
} 

Answer 5

input[type='file'] { 
    color: transparent; 
} 

享受

Answer 6

您可以更換該文件字段帶有一個按鈕，與這個問題的答案：file upload button without input field?