我有一个html input type file控件。当我选择一个文件名很长的文件时,在firefox浏览器中会显示完整的文件名,这会导致不良的UI体验。是否有任何解决此问题的方法,例如更改名称等?
我有一个html input type file控件。当我选择一个文件名很长的文件时,在firefox浏览器中会显示完整的文件名,这会导致不良的UI体验。是否有任何解决此问题的方法,例如更改名称等?
input file
控件隐藏,并添加onchange
事件处理程序以更改所选文件名称textbox
控件,用于显示更改后的文件名button
控件和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;
}
我知道有三个可能的答案:
<form enctype="multipart/form-data" ... >
时,文件不会被上传。我认为这也有很好的文档记录,但我只是假设这是真的,并将其视为不良实践。 - Saram