Javascript 在firefox中操作html输入类型文件名

我有一个html输入类型的文件控件。当我选择一个非常大的文件名时，它会在firefox中显示完整的文件名，这会导致糟糕的UI。是否有任何解决此问题的方法，如更改名称等？

您可以通过以下方式处理此问题：

使html

输入文件

控件隐藏，并添加

onchange

事件处理程序以更改所选文件名

添加一个只读html

textbox

控件，用于显示更改的文件名

使用

onclick

事件处理程序添加html

按钮

控件，以触发文件控件的单击事件

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);" />

#file1 {
    display: none;
}

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

function setFileName(fileName) {

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

JS:

<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);" />

#file1 {
    display: none;
}

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

function setFileName(fileName) {

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

---

我知道有三种可能的答案：

您可以设置输入大小的样式，然后通过浏览器将较长的名称剪切到给定的大小（在可见零件的末尾使用“…”）

出于安全原因，不能从脚本更改文件输入的值。触发器的单击事件也是如此。因此，在这种情况下，答案是否定的

您可以使用“pseude自定义css”覆盖整个文件输入。它不是真正的输入样式，但使用了一些不透明度技巧。寻找更多细节

---

这与跨浏览器不兼容。当您提交标准表单时，您无法发送未从IO设置的文件。请单击file input control.AFAIR，文件未上载。我认为它也有很好的文档记录，但我只是假设这是真的，我认为这是一个糟糕的做法。我不确定它是否有效，但这确实为我指明了正确的方向。但在我的真实代码中，我最终使用了@Nitin uniformjs.com使用不透明：0技巧。不错的选择-看起来很酷。