在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元无门槛券

手把手带您无忧上云

在HTML文件中插入文件名的JS函数

相关·内容

11.尚硅谷_JS高级_函数中的this.avi

17-在idea中能够创建mybatis核心配置文件和映射文件的模板

104-MySQL目录结构与表在文件系统中的表示

21_尚硅谷_MyBatis_在idea中设置映射文件的模板

20_尚硅谷_MyBatis_在idea中设置核心配置文件的模板

02-javascript/10-尚硅谷-JavaScript-js中的函数不允许重载

Split端口详解

2038年MySQL timestamp时间戳溢出

MySQL系列七之任务1【导入SQL文件，生成表格数据】

Go 语言读写 Excel 文档

PS小白教程:如何在Photoshop中使用蒙版工具插入图片？

081.slices库查找索引Index

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐