javascript - 在Firefox中操作html输入类型文件文件名

Question

我有一个 html 输入类型的文件控件。当我选择一个名称非常大的文件时，它会在 Firefox 中显示完整的文件名，这会导致 UI 错误。有没有解决这个问题的办法，比如改名等？

Answer 1

你可以这样处理：

1. input file隐藏您的 html控件并添加onchange事件处理程序以更改选定的文件名
2. 添加只读htmltextbox控件以显示更改的文件名
3. 添加带有事件处理程序的 htmlbutton控件onclick以触发文件控件的单击事件

演示在这里

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"覆盖整个文件输入。它不是真正的输入样式，而是使用了一些不透明的技巧。在这里查看更多详细信息。