Question

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

Answer 1

你可以这样处理：

隐藏您的html input file控件并添加onchange事件处理程序以更改所选文件名
添加 readonly html textbox控件以显示已更改的文件名
使用button事件处理程序添加html 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

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

您可以设置输入的样式大小，然后浏览器将较长的名称剪切为给定的大小（在可见部分的末尾使用“...”）。
出于安全原因，您无法从脚本更改文件输入的值。触发其click事件也是如此。所以这个案例的答案是否。
您可以使用“pseude custom css”覆盖整个文件输入。它不是真正的输入样式，而是使用一些不透明的技巧。查看here了解更多详情。

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

2 个答案: