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

manipulate html input type file filename in firefox

本文关键字：输入 类型 文件名 html 操作 firefox      更新时间：2023-09-26

我有一个html输入类型的文件控件。当我选择一个名称很大的文件时，它会在firefox中显示完整的文件名，这会导致UI不好。这个问题有什么解决办法吗，比如改名等等？

您可以这样处理：

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

此处演示

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

我知道三个可能的答案：

  1. 您可以设置输入的大小样式，然后浏览器将较长的名称剪切为给定的大小（在可见部分的末尾带有"…"）
  2. 出于安全原因，您不能从脚本更改文件输入的值。触发器的单击事件也是如此。因此，在这种情况下，答案是否
  3. 您可以使用"pseude-custom-css"覆盖整个文件输入。它不是真正的输入样式，但使用了一些不透明度技巧。查看此处了解更多详细信息
相关文章：