在Firefox中操作HTML输入类型文件名

Question

我有一个html input type file控件。当我选择一个文件名很长的文件时，在firefox浏览器中会显示完整的文件名，这会导致不良的UI体验。是否有任何解决此问题的方法，例如更改名称等？

- Popeye

Answer 1

您可以这样处理：

1. 将您的html input file控件隐藏，并添加onchange事件处理程序以更改所选文件名称
2. 添加一个只读的html textbox控件，用于显示更改后的文件名
3. 添加html button控件和onclick事件处理程序来触发文件控件的单击事件

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;
}

- Software Engineer

---

这不是跨浏览器兼容的。您无法发送未从IO单击文件输入控件设置的文件。 - Saram

据我所知，当您提交标准表单<form enctype="multipart/form-data" ... >时，文件不会被上传。我认为这也有很好的文档记录，但我只是假设这是真的，并将其视为不良实践。 - Saram

我不确定它是否有效，但这绝对指引了我正确的方向。但在我的实际代码中，我最终使用了http://uniformjs.com/。 - Popeye

@Nitin uniformjs.com使用opacity:0的技巧。很不错的选择-看起来很酷。 - Saram

Answer 2

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

1. 您可以调整输入字段的大小，然后浏览器将长名称裁剪到给定的大小（可见部分末尾带有“...”）。
2. 出于安全考虑，您不能从脚本更改文件输入字段的值。单击事件也是一样的。因此，在这种情况下，答案是不行。
3. 您可以使用"伪自定义CSS"覆盖整个文件输入字段。这不是真正的输入字段样式，而是使用一些不透明度技巧。请查看这里获取更多详细信息。

- Saram