双击图片上传

最新推荐文章于 2020-07-20 17:43:21 发布

原创

最新推荐文章于 2020-07-20 17:43:21 发布 · 590 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了如何在页面上实现双击图片后上传的功能。通过一个隐藏的input标签和一个img标签，配合accept属性筛选图片，使用FileReader读取文件并进行正则表达式验证，确保上传的是图片。当文件选择器中的文件改变时，读取文件并检查类型，将图片文件转换为URL，最后设置到img标签的src属性，显示上传的图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

相信大家做页面还是项目时，都想过双击一个图标然后就可以上传图片，我也是刚学习不久，下面给大家讲一下是怎么操作的，看一下我学习的一个案例

首先是一张要点击的照片或者图标，一个隐藏的input标签，img标签里的一个src路径原本是空的，在下面设置了才有这么一个路径。其次就是input标签，里面有一个accept，其实是一个自定义默认的图片筛选条件，把其他的不符合条件的都筛选掉了，比如work文档、excel电子表这些。你也可以把这个图片筛选条件给删除掉，在页面显示选择所有文件。
在这里插入图片描述
接下来就是操作，双击图片打开文件选择器，在双击图片的时候相当于点击了一下文件选择器，我们要调用一下JS的文件读取器FileReader来读取文件，所以要把它new出来。然后就是一个正则表达式用来筛选过滤，要判断是否符合图片文件。
在这里插入图片描述
当我选择到文件，文件选择器发生改变，就会触发改变事件。读取当前选中的文件，如果我选择了多个文件或者是其他文件类型，那就要进行判断。判断是否选中文件，如果选择的多个文件，就获取第一个文件。但是如果我选中的是一个word的文档或者其他文件类型，就不符合我的需求，所以用上面的正则表达式进行检测，判断它的文件类型是否为图片类型，满足条件就调用文件读取器把图片文件读取完后，转换成url的一个格式。
在这里插入图片描述
由于文件读取器在上面被调用，所以就触发了一个onload加载事件。文件读取器在上面把图片转换成了一个url，然后在加载事件里就接收到了这个url，就把url设置给src，也就是上面的img标签的src，