在firefox中操作html輸入類型文件文件名

Question

我有一個html輸入類型文件控件。 當我選擇一個名字很大的文件時，它會在firefox中顯示完整的文件名，這會導致錯誤的UI。 有沒有解決這個問題的方法，如更改名稱等？

Answer 1

你可以這樣處理它：

1. 使您的html input file控件隱藏，並添加onchange事件處理程序以更改選定的文件名
2. 添加一個只讀的 html textbox控件，以顯示更改的文件名
3. 使用onclick事件處理程序添加html button控件以觸發文件控件的單擊事件

DEMO在這里

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. 出於安全原因，您無法從腳本更改文件輸入的值。 觸發其click事件也是如此。 所以這個案子的答案是否定的 。
3. 您可以使用“pseude custom css”覆蓋整個文件輸入。 它不是真正的輸入樣式，而是使用一些不透明的技巧。 在這里查看更多詳情。