导航菜单
首页 > 网页制作 > HTML/Xhtml » 正文

Html读取本地文件夹下图片并显示的示例代码

后台-系统设置-扩展变量-手机广告位-内容正文顶部
这篇文章主要介绍了Html读取本地文件夹下图片并显示的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

一 目的

在Html上选择本地文件夹,自动读取文件夹及子文件夹下的所有图片并显示在页面。

技术分析:

存在问题

  • Html中file标签获取到的路径时相对的。
  • Html中Img指定源时需要的是绝对路径。

解决方法:

调用Web API接口FileReader中readAsDataURL方法读取数据(这个函数参数file标签获取到的文件路径),然后把数据加载到FileReader中(base64格式),之后就可以用Img来指定源时base64格式的数据,可以绘制图片。

二 代码

<!DOCTYPE html><html><head>    <title>ReadImageDemo</title></head><body>    <input type="file" id="selectFiles">三 效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

收藏此文 赞一个 ( ) 打赏本站

如果本文对你有所帮助请打赏本站

  • 打赏方法如下:
  • 支付宝打赏
    支付宝扫描打赏
    微信打赏
    微信扫描打赏
后台-系统设置-扩展变量-手机广告位-内容正文底部

相关推荐:

留言与评论(共有 0 条评论)
   
验证码:
二维码