JavaScript 实现点击自定义按钮触发文件上传窗口

作者:异步漫步时间:2026-10-21 18:51:58浏览:663

本文介绍如何通过 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 的在线测试环境中并运行,结果页面将显示一个“选择文件”按钮,如图:

功能概述

点击“选择文件”按钮后,页面会弹出文件选择窗口,显示本地磁盘目录,供用户选择文件,效果如图:

功能概述

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持本站!

作者最新文章