在readOnly文本框中显示文件名,可以通过以下步骤实现:
以下是一个示例的HTML代码:
<input type="text" id="filename" readonly>
<input type="file" id="fileInput" onchange="displayFileName()">
<script>
function displayFileName() {
var fileInput = document.getElementById("fileInput");
var filenameInput = document.getElementById("filename");
// 获取选择的文件名
var filename = fileInput.files[0].name;
// 将文件名显示在readOnly文本框中
filenameInput.value = filename;
}
</script>
在上述示例中,通过onchange
事件监听文件选择框的变化,当用户选择文件后,调用displayFileName()
函数获取文件名,并将文件名显示在id
为filename
的readOnly文本框中。
这是一个简单的实现方法,适用于基本的文件名显示需求。如果需要更复杂的功能,如文件路径的显示、文件名的截取等,可以根据具体需求进行相应的修改和扩展。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云