首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

可以通过以下方式实现:

代码语言:txt
复制
<!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

这个函数可以在需要显示文件名的地方使用,例如在上传文件时,可以在页面上显示所选文件的名称。

腾讯云相关产品和产品介绍链接地址:

请注意,以上仅为腾讯云的一些相关产品,其他云计算品牌商也提供类似的产品和服务。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

鹅厂分布式大气监测系统:以 Serverless 为核心的云端能力如何打造?

导语 | 为了跟踪小区级的微环境质量,腾讯内部发起了一个实验性项目:细粒度的分布式大气监测,希望基于腾讯完善的产品与技术能力,与志愿者们共建一套用于监测生活环境大气的系统。前序篇章已为大家介绍该系统总体架构和监测终端的打造,本期将就云端能力的各模块实现做展开,希望与大家一同交流。文章作者:高树磊,腾讯云高级生态产品经理。 一、前言 本系列的前序文章[1],已经对硬件层进行了详细的说明,讲解了设备性能、开发、灌装等环节的过程。本文将对数据上云后的相关流程,进行说明。 由于项目平台持续建设中,当前已开源信息

014
领券