在HTML文件中插入文件名的JS函数
可以通过以下方式实现：
<!DOCTYPE html>
<html>
<head>
<title>Insert File Name</title>
<script>
function insertFileName() {
var fullPath = document.getElementById('fileInput').value; // 获取文件路径
var fileName = fullPath.split('\\').pop().split('/').pop(); // 提取文件名
document.getElementById('fileNameOutput').innerHTML = fileName; // 将文件名插入到指定元素中
}
</script>
</head>
<body>
<input type="file" id="fileInput" onchange="insertFileName()" /> <!-- 文件选择输入框 -->
<p id="fileNameOutput"></p> <!-- 用于显示文件名的元素 -->
</body>
</html>上述代码中，我们创建了一个名为insertFileName的JS函数。该函数通过获取文件选择输入框的值，即文件的完整路径，然后使用split方法提取文件名，并将提取到的文件名插入到指定的元素中。
在HTML中，我们使用<input type="file">标签创建了一个文件选择输入框，当用户选择文件后，触发onchange事件，调用insertFileName函数。文件名将会显示在<p>标签中，该标签的id属性为fileNameOutput。
这个函数可以在需要显示文件名的地方使用，例如在上传文件时，可以在页面上显示所选文件的名称。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：提供弹性计算能力，支持多种操作系统和应用场景。
- 腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务，适用于图片、音视频、文档等各种类型的文件存储。
- 腾讯云云函数（SCF）：无服务器计算服务，支持事件驱动的函数计算，无需管理服务器，按需付费。
- 腾讯云CDN：内容分发网络服务，加速内容传输，提高用户访问速度。
- 腾讯云域名注册：提供全球范围内的域名注册服务，支持各类域名后缀。
- 腾讯云SSL证书：提供数字证书服务，保护网站和应用的数据传输安全。
- 腾讯云数据库（TencentDB）：提供多种类型的数据库服务，包括关系型数据库、NoSQL数据库等。
- 腾讯云人工智能（AI）：提供多种人工智能服务，包括图像识别、语音识别、自然语言处理等。
- 腾讯云物联网（IoT）：提供物联网设备连接、数据采集、设备管理等服务，支持构建物联网应用。
- 腾讯云移动开发（MPS）：提供多媒体处理服务，包括音视频转码、内容审核等。
- 腾讯云区块链（BCG）：提供区块链服务，支持构建可信、高效的区块链应用。
- 腾讯云元宇宙（Metaverse）：提供元宇宙解决方案，支持构建虚拟世界和数字化场景。
请注意，以上仅为腾讯云的一些相关产品，其他云计算品牌商也提供类似的产品和服务。
相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
