本文介绍如何通过 JavaScript 隐藏原生文件输入框，并绑定自定义按钮的点击事件来触发文件选择窗口。核心思路是利用 DOM 操作调用隐藏 input 元素的 click 方法，从而在不改变页面布局的前提下实现文件上传功能的交互优化。
功能概述
1. 功能概述
在网页界面中添加一个“选择文件”按钮，用户点击该按钮时，系统会自动弹出本地文件选择对话框，以便用户从磁盘中选择所需文件。
代码实现
2. 代码实现
核心代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script type="text/javascript">
function F_Open_dialog()
{
document.getElementById("btn_file").click();
}
</script>
</head>
<body>
<div>
<input type="file" id="btn_file" style="display:none">
<button type="button" onclick="F_Open_dialog()">选择文件</button>
</div>
</body>
</html>
操作步骤
3. 操作步骤
将上述代码复制到 W3CSchool 的在线测试环境中并运行，结果页面将显示一个“选择文件”按钮，如图：
点击“选择文件”按钮后，页面会弹出文件选择窗口，显示本地磁盘目录，供用户选择文件，效果如图：
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持本站！