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

当使用addEventListener点击图片时,我如何显示图片的文件名?

当使用addEventListener点击图片时,可以通过以下步骤来显示图片的文件名:

  1. 首先,给图片元素添加一个点击事件监听器,使用addEventListener方法来监听点击事件。例如,假设图片元素的id为"myImage",可以使用以下代码添加点击事件监听器:
代码语言:txt
复制
document.getElementById("myImage").addEventListener("click", showFileName);
  1. 创建一个名为showFileName的函数,该函数将在点击事件发生时被调用。在该函数中,可以通过获取图片元素的src属性来获取图片的文件名。可以使用split方法将src属性值按照"/"进行分割,然后获取分割后的数组的最后一个元素,即为文件名。例如:
代码语言:txt
复制
function showFileName() {
  var imagePath = document.getElementById("myImage").src;
  var fileName = imagePath.split("/").pop();
  alert("图片文件名为:" + fileName);
}
  1. 最后,当点击图片时,showFileName函数将被调用,弹出一个包含图片文件名的提示框。

这样,当点击图片时,就可以显示出图片的文件名。

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

  • 腾讯云对象存储(COS):提供高可靠、低成本的云端存储服务,适用于存储和处理图片等各种类型的文件。产品介绍链接:https://cloud.tencent.com/product/cos

请注意,以上答案仅供参考,具体实现方式可能因实际需求和代码环境而有所不同。

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

相关·内容

网页轮播图案例

轮播也称为焦点,是网页中比较常见网页特效。 功能需求: 1.鼠标经过轮播模块,左右按钮显示,离开隐藏左右按钮。 2.点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理。...3.图片播放同时,下面小圆圈模块跟随一起变化。 4.点击小圆圈,可以播放相应图片。 5.鼠标不经过轮播,轮播也会自动播放图片。 6.鼠标经过,轮播模块, 自动播放停止。...使用动画函数前握,该元素必须有定位 注意是ul移动而不是小li 滚动图片核心算法:点击某个小圆圈,就让图片滚动小圆圈索引号乘以图片宽度做为ul移动距离 点击右侧按钮一次,就让图片滚动一张...图片无缝滚动原理 把ul第一个li复制一份,放到ul 最后面 图片滚动到克隆最后一张图片时,让ul快速、 不做动画跳到最左侧: left 为0 同时num赋值为0,可以从新开...自动播放功能 添加一个定时器 自动播放轮播,实际就类似于点击了右侧按钮 此时我们使用手动调用右侧按钮点击事件arrow_r.click() window.addEventListener

1.4K30

网页轮播图案例

轮播也称为焦点,是网页中比较常见网页特效。 功能需求: 1.鼠标经过轮播模块,左右按钮显示,离开隐藏左右按钮。 2.点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理。...3.图片播放同时,下面小圆圈模块跟随一起变化。 4.点击小圆圈,可以播放相应图片。 5.鼠标不经过轮播,轮播也会自动播放图片。 6.鼠标经过,轮播模块, 自动播放停止。...鼠标经过轮播模块,左右按钮显示,离开隐藏左右按钮。...图片无缝滚动原理 把ul第一个li复制一份,放到ul 最后面 图片滚动到克隆最后一张图片时,让ul快速、 不做动画跳到最左侧: left 为0 同时num赋值为0,可以从新开 始滚动图片了 克隆第一张图片...自动播放功能 添加一个定时器 自动播放轮播,实际就类似于点击了右侧按钮 此时我们使用手动调用右侧按钮点击事件arrow_r.click() window.addEventListener('load'

5.5K21
  • Excel催化剂功能第11波-快速批量插入图片并保留纵横比

    是否精确查找文件名 在需要查找单元格内容中,如果不是精确图片文件名,可去勾选此项,例如:图片文件名叫abcM20.jpg,单元格内容是abc,需要去勾后才能让abc内容也能去匹配abcM20.jpg...删除图片 使用插件插入图片,如果不再想显示点击【批量删除图片】按钮,即可把插件插入图片进行删除 其他非插件插入图片不会作删除处理。...未找到图片时高亮颜色显示 需要插入图片,有部分在图库文件夹里找寻不到,插件将会对其单元格底色进行标注,方便后续想查找哪些单元格没有图片时只需用Excel自带颜色筛选即可查找得到。...多插入-图片未找到标颜色 重新调整图片 插入图片,不如预想效果大小,可以调整行高列宽后,再点击【重新调整图片】按钮,图片即可重新按新行高列宽进行调整。...另外如果对插入图片文件名进行了筛选操作,图片位置也会有所错位,此时也可再点击【重新调整图片】按钮,让图片归位到正确位置 多插入-调整前 多插入-调整后 图片名称内容列进行过排序操作后图片错乱解决办法

    1.2K30

    网页轮播图案例

    案例:网页轮播 轮播也称为焦点,是网页中比较常见网页特效。 功能需求: ​ 1.鼠标经过轮播模块,左右按钮显示,离开隐藏左右按钮。 ​...③ 鼠标经过轮播模块,左右按钮显示,离开隐藏左右按钮。 ④ 显示隐藏 display 按钮。...上面) ③ 使用动画函数前提,该元素必须有定位 ④ 注意是ul 移动 而不是小li ⑤ 滚动图片核心算法: 点击某个小圆圈 , 就让图片滚动 小圆圈索引号乘以图片宽度做为ul移动距离...③ 图片无缝滚动原理 ④ 把ul 第一个li 复制一份,放到ul 最后面 ⑤ 图片滚动到克隆最后一张图片时, 让ul 快速、不做动画跳到最左侧: left 为0 ⑥ 同时num 赋值为0,...④ 此时我们使用手动调用右侧按钮点击事件 arrow_r.click() ⑤ 鼠标经过focus 就停止定时器 ⑥ 鼠标离开focus 就开启定时器 window.addEventListener

    2.4K10

    JavaScript案例:轮播

    轮播也称为焦点,是网页中比较常见网页特效。 功能需求 鼠标经过轮播模块,左右按钮显示,离开隐藏左右按钮。 点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理。...点击小圆圈滚动图片 此时用到 animate动画函数,将js文件引入(注意:因为index.js依赖animate.js所以,animate.js要写到index.js上面) 使用动画函数前提,该元素必须有定位...右侧按钮无缝滚动 点击右侧按钮一次,就让图片滚动一次 声明一个变量 num,点击一次,自增1,让这个变量乘以图片宽度,就是 ul滚动距离 图片无缝滚动原理 把ul第一个 li复制一份,放到 ul最后面...图片滚动到克隆最后一张图片时,让ul快速、不做动画跳到最左侧:left为0 同时 num赋值为0,可以从新开始滚动图片了 克隆第一张图片 克隆 ul第一个 li cloneNode() 加 true...但是图片有5张,我们小圆圈只有4个少一个,必须加一个判断条件 如果 circle==4 就从新复原为0 自动播放功能 添加一个定时器 自动播放轮播,实际就类似于点击了右侧按钮 此时我们使用手动调用右侧按钮点击事件

    3K10

    搭建一个属于自己

    前言 我们在使用Typora进行创作时,文章中图片可以选择保存到本地或者上传到第三方服务方床。...如果图片保存到本地,当我们需要在互联网和别人分享自己创作内容时,图片是无法显示,而第三方床基本上都是收费。 本文就将跟大家分享下如何搭建一个属于自己床,欢迎各位感兴趣开发者阅读本文。...环境搭建 在typora偏好配置中,我们切换到图像一栏,如下所示: image-20210717193829888 图中序号1位置,可以选择插入图片时行为,点开后我们选择上传图片选项 图中序号2位置...,可以选择上传图片时用哪个床客户端,点开后我们选择uPic选项 安装床客户端 进入uPic项目的GitHub主页,在Releases页面下载安装包即可。...上传服务 上传服务可以使用任何一门后端语言来编写,只要遵循文件上传规范即可,由于后端语言只会Java,本文就以Java+SpringBoot框架为例,写一段示例代码。

    80331

    QQ空间缓存图片_QQ空间原图

    大家好,又见面了,是你们朋友全栈君。 不知各位遇到特别长图片时是怎么处理? 是 截取符合长宽部分做临时展示? 还是 硬要长宽100%模糊(啥也看不清)展示?...还是 先拿一个压缩图片做占位,在鼠标移入或点击时放大预览? 今天偶然打开PC端QQ空间时,发现了一种似乎更好方式 —— 鼠标移入时在范围内上下滚动图片预览,移出时停止滚动。...直到用户点击图片跳转到详情展示: ---- 分析 这种方式着实让“眼前一亮”,一定程度上带给了用户新奇体验感。...; window.innerHeight :inner系API,它们只作用在window对象上,返回窗口文档显示高度(同系还有一个 window.innerWidth ) 相对两个...本来这里笔者想采用伪元素方式:用 ::before 和 ::after 占位并触发事件,但是在查遍资料以后突然想到一件事:不是经常说伪元素优势是脱离文档流吗?那还如何能够获取到?

    6.3K20

    【JS】1705- 重学 JavaScript API - Fullscreen API

    演示文稿:通过将演示文稿全屏显示,可以确保观众集中注意力,展示出更好视觉效果。 图片浏览器:在浏览图片时,将图片全屏显示可以提供更大展示区域,使用户能够更好地欣赏图片细节。...Fullscren API 使用场景丰富多样,可以根据具体需求来应用。 2. 如何使用 Fullscreen API Fullscreen API 提供了一组方法和属性,用于实现全屏显示和控制。...click", () => { document.documentElement.requestFullscreen(); }); 在这个例子中,我们获取了一个按钮元素,按钮被点击时,我们调用...图片浏览器:在浏览图片时,将图片全屏显示可以提供更大展示区域,使用户能够更好地欣赏图片细节。 除此之外,Fullscreen API 还可以应用于各种需要全屏显示场景中。...接下来使用 Fullscreen API 实现图片全屏展示示例: <!

    29240

    3D视觉体验:利用HTML、CSS与JavaScript打造炫酷轮播

    前言 在网页设计与开发领域中,新颖交互效果对于提升用户体验至关重要。轮播作为一种展示多幅图片或内容核心组件,在各类网站上广泛运用。...为了打破常规2D轮播局限性,本文将深入探讨如何通过HTML、CSS与JavaScript技术升级为立体感十足3D轮播,并通过实际代码实例详细解析其实现原理和关键技术点。...matrix3d():使用4x4矩阵表示所有3D变换操作。 Perspective 属性: perspective:设置在父容器上,为子元素提供透视效果,模拟真实世界中近大远小立体视觉。...div>作为轮播容器,并在其内部放置五个.carousel-item类别的元素,分别代表轮播不同图片项。...bindEvents()函数为每张图片添加点击事件监听器,当用户点击某张图片时,更新当前显示图片索引并重新布局。

    1.8K62

    私人订制Android本地图片选择器

    效果 需求分析 网格布局显示本地图片 支持图片多选 支持选中图片预览 未选择图片时不可预览 由已选多变为无时可退出图片选择页面 图片已选达到上限后依然可以跳转图片选择页面 第三方框架使用 史上最强安卓图片选择器...,选择图片Activity是GalleryFinal自带,所以我们这里要写GridView是用来显示选中并返回图片,这里代码就不放出来了,效果如下: ?...选择图片时 本人实现可支持最大图片数量是5,在图片选满时候依然显示“+”,用以跳转图片选择页面选择其他图片。...3.注释掉源码中对图片数量上限判断 无选择时,点击浮动按钮可以返回 可能有人不解,为何不点击标题栏返回按钮返回而要点击浮动按钮返回?...其原因是,若之前选择好图片,但是想想,现在不想要选择图片了,这时候我们想把图片清空掉,这时候需要点击浮动按钮,来更新选中图片列表。

    1.4K30

    原生 JS 手写一个优雅图片预览功能,带你吃透背后原理

    打开蒙层在开始前我们先准备一个图片列表,并绑定好点击事件,点击图片时,通过 document.createElement 创建元素,然后把图片节点克隆进蒙层中,这对你来说并不难,简单实现如下。...图片在上一篇文章手写拖拽效果中也讲到了如何在JS中使用数学方法计算两点间距离,下面介绍另一种常见简洁写法,Math.hypot() 函数返回其参数平方和平方根:图片nd.y - start.y)...又或者使用 will-change: transform; 来告诉浏览器提升渲染性能呢?正常图片显示使用了 translate3d 之后图片图片答案是后两者都会使移动端图片变模糊!...(Android似乎不会)起初发现图片在手机上模糊问题时,调试很久都没定位到源头,一筹莫展之际想起以前做H5网页常使用 vant 框架,就想要不看看它源码中图片预览组件吧,很快找到相关代码位置,...代码截图:图片从代码片段中看到 vant 并没有使用任何 translate3d 或 scale3d 属性,看来是真的有坑了。

    2.9K81

    VUE+WebPack:开发一款太空版植物大战僵尸前端页游

    从本节开始,我们探讨如何使用VUE和WebPack开发一款类似于植物大战僵尸前端游戏,游戏完成后,情况如下: 游戏设定如下,一系列外星飞船从天而降入侵地球,为了保护地球,玩家需要使用各种道具防止外星飞船落入底部地球...外星飞船被成功阻挡时,界面会弹出一系列奖章,也就是图片里面的”E”,点击这些奖章后,玩家可以获得积分,一旦积分达到要求,玩家就可以选择炮台,也就是图片中红色物体,炮台可以发射子弹,一旦子弹打中外星飞船...制作出来,这些图片资源全部打包在一个名为assets.fla文件中,这个文件必须使用flash相关软件才可以查看,为了能够在js代码中使用fla文件中资源,通过flash软件就可以把.fla文件转为...,而背景图片就是assets.Background()接口返回,我们把背景绘制到bgLayer对象里,然后把该对象加入舞台容器控件,也就是stage,这样背景图片就可以显示在页面上了, 背景部分显示如下...同时给底部几个按钮设置点击响应函数,按钮被点击是,组件addButtonOnMouseDown()就会被调用,在该函数里,代码判断用户点击按钮对应哪种物件,并判断当前玩家所有的资源是否足够建筑对应建筑物

    1.2K20

    移动端轮播效果实现

    500%,但这样会造成图片放大5倍,因此我们为img父元素li设置20%宽度占ul五分之一,这时候图片显示正常了 自动播放 利用索引号与宽度实现每次要滚动距离 每次移动距离等于当前索引...(克隆第一张图片时候,我们快速跳到第一张图片位置继续滚动即可 不过需要注意是我们使用了过渡效果,如果我们直接跳转会有过渡效果这样用户会很明显感觉到,我们要做是用户察觉不出来图片已经跳到了第一张...= 'translateX('+translateX+'px)' } }) }) 此时无缝滚动完成一半了 我们还有一种情况,当用户在第一张图片向右边拖到图片时,此时应该看到最后一张...,为了实现无缝滚动效果,此时我们瞬间跳转到真正最后一张也就是索引为2执行定时器时,索引变成了3,此时又会跳到第一张,由此实现了无缝滚动。...;重新开启了定时器 到此轮播制作完成。

    1.6K10

    QQ 大更新!语音进度条来了,还有这 5 个新变化

    如果你是QQ忠实用户,对于聊天背景颜色改变,你可能会有一些不适应。 除此之外,聊天界面左上角「聊天设置」图标发生了改变,而在点击进入聊天设置页面后,布局上改变与个人信息页相似。...版 无论你是使用对讲、录音或是变声功能发送或收到语音消息,都支持以上效果。...具体效果我们做了一个动进行演示,三条语音分别为对讲、录音及变声效果: 拖动语音进度条演示 转发图片时预览弹窗不可编辑 App Store更新描述里,提到了「优化转发消息体验」,事实上为了这个「优化...在QQ 7.9.9及以下版本中,你可以在转发图片时图片进行编辑;但在QQ 8.0.0 for iOS中,转发图片操作变得与微信类似,只可以附带留言,无法进行图片编辑。...如何转型做产品经理? 怎么看运营前世今生?

    1.7K20

    「JavaScript 」动画基础 - 02

    将这个函数作为参数传到另一个函数里面,那个函数执行完之后,再执行传进去这个函数,这个过程就叫做回调。 回调函数写位置:定时器结束位置。...常见网页特效案例 1.2.1 案例:网页轮播 轮播也称为焦点,是网页中比较常见网页特效。 功能需求: 鼠标经过轮播模块,左右按钮显示,离开隐藏左右按钮。...点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理。 图片播放同时,下面小圆圈模块跟随一起变化。 点击小圆圈,可以播放相应图片。 鼠标不经过轮播,轮播也会自动播放图片。...动态生成小圆圈 有几张图片就生成几个小圆圈 var ul = focus.querySelector('ul'); var ol = focus.querySelector('.circle...点击小圆圈,移动图片 当然移动是 ul // ul 移动距离 小圆圈索引号 乘以 图片宽度 注意是负值 // 当我们点击了某个小li 就拿到当前小

    36020
    领券