在Firefox中操縱html輸入類型文件的文件名

Question

我有一個html輸入類型的文件控件。當我選擇一個名字非常大的文件時，它會在Firefox中顯示完整的文件名，這會導致錯誤的用戶界面。是否有任何解決這個問題，如更改名稱等？

Answer 1

你可以這樣處理：

1. 讓你的HTML input file控制隱藏，並添加onchange事件處理程序更改選定的文件名
2. 添加只讀 HTML textbox控制顯示改變文件名稱
3. 添加html button控件與onclick事件處理程序觸發文件控件的單擊事件

DEMO here

HTML：

<input type="text" id="txtFile" readonly="true" /> 
<input type="button" id="btn" value="Browse..." onclick="browseFile();" /> 
<input type="file" id="file1" name="file1" onchange="setFileName(this.value);" /> 

CSS：

#file1 { 
    display: none; 
} 

JS：

function browseFile() { 
    document.getElementById('file1').click(); 
} 

function setFileName(fileName) { 

    /* Manipulate file name here */ 
    fileName = fileName.substr(0, fileName.lastIndexOf('.')); 
    document.getElementById('txtFile').value = fileName; 
} 

Answer 2

有三種可能的答案，我知道：

1. 您可以將輸入的風格大小，然後瀏覽器（在可見部分的結束與「...」）削減更長的名稱給定大小。
2. 出於安全原因，您不能從腳本中更改文件輸入的值。觸發它的點擊事件也是一樣。所以在這種情況下的答案是否。
3. 您可以用「pseude custom css」覆蓋整個文件輸入。這不是真正的輸入樣式，但使用一些不透明的技巧。請查看here瞭解更多詳情。