Html读取本地文件夹下图片并显示的示例代码
时间：2019-12-05来源：系统城作者：电脑系统城
一 目的
在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" onchange="dealSelectFiles()" multiple webkitdirectory>
- <canvas id="myCanvas" width=1440 height=900></canvas>
- <script type="text/javascript">
- var imgPosX = 0;
- var imgWidth = 256;
- function dealSelectFiles(){
- /// get select files.
- var selectFiles = document.getElementById("selectFiles").files;
- for(var file of selectFiles){
- console.log(file.webkitRelativePath);
- /// read file content.
- var reader = new FileReader();
- reader.readAsDataURL(file);
- reader.onloadend = function(){
- /// deal data.
- var img = new Image();
- /// after loader, result storage the file content result.
- img.src = this.result;
- img.onload = function(){
- var myCanvas = document.getElementById("myCanvas");
- var cxt = myCanvas.getContext('2d');
- cxt.drawImage(img, imgPosX, 0);
- imgPosX += imgWidth;
- }
- }
- }
- }
- </script>
- </body>
- </html>
三 效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
分享到：
相关信息
-
-
-
2023-03-06
html中ul和li标签的用法详解 -
2023-03-06
dw调节一个角的角度代码技巧 HTML怎么角度代码调节一个角的角度? -
2022-12-06
dw制作虚线圆圈的技巧 html用代码制作虚线框怎么做?
-
-
HTML静态页面获取url参数和UserAgent的实现本文主要介绍了HTML静态页面获取url参数和UserAgent的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值...
2022-09-12
-
html网页引入svg图片的4种方式web应用开发使用svg图片，总结了下，可以有如下4种方式： 1. 直接插入页面。 2. img标签引入。 3. css引入。 4. object标签引入。...
2022-09-12
热门系统总排行
- 4754次 1 雨林木风Win10专业版64位纯净版系统官方下载
- 3784次 2 电脑公司ghost win7 64位纯净专业版v2019.08
- 2502次 3 Win11官方最新版系统下载_Ghost Win11 22000.434(KB5009566)专业免激活版下载
- 2324次 4 深度技术 GHOST WIN10 X64 纯净版 V2019.09（64位）
- 1882次 5 电脑系统城ghost win7 sp132位 经典标准版 V2019.11
- 1794次 6 电脑公司 GHOST XP SP3 安全稳定纯净版 V2019.08
- 1733次 7 电脑公司ghost win7 32位精简旗舰版v2019.08
- 1700次 8 电脑公司 GHOST WIN10 X64 正式专业版 V2019.09（64位）
系统教程栏目
栏目热门教程
- 1121次 1 Html读取本地文件夹下图片并显示的示例代码
- 898次 2 form表单完成html测试20道页面排列
- 881次 3 详解Html页面中内容禁止选择、复制、右键的实现方法
- 875次 4 HTML5之audio属性
- 873次 5 HTML5 video自定义视频播放器
- 799次 6 巧用 -webkit-box-reflect 倒影实现各类动效(小结)
- 760次 7 HTML+CSS+JS实现图片的瀑布流布局的示例代码
- 750次 8 HTML静态页面获取url参数和UserAgent的实现
- 683次 9 dw制作虚线圆圈的技巧 html用代码制作虚线框怎么做?
- 606次 10 html网页引入svg图片的4种方式
人气教程排行
- 56679次 1 联想笔记本进入bios的三种方法 联想笔记本怎么进入bios
- 51284次 2 打印机为什么打印出来是黑的_打印出来纸张表面黑的解决方法
- 39166次 3 笔记本电脑序列号在哪|笔记本电脑序列号怎么看
- 32783次 4 对于目标文件系统文件过大无法复制到u盘怎么解决方法
- 31658次 5 键盘全部按键没反应的解决方法 键盘被锁住按什么键恢复
- 30927次 6 键盘win键无效的解决办法 电脑win键失效怎么办?
- 30837次 7 mac连上wifi却上不了网如何解决 网络没问题但mac无法上网怎么办
- 27299次 8 小马激活工具 Win10正版激活 一键完美激活Win10_小编亲测
- 26437次 9 win7旗舰版激活密钥大全
- 25426次 10 电脑免费的加速器有哪些 永久免费的四款加速器推荐
站长推荐
- 12747次 1 Win11怎么激活？Win11系统永久激活方法汇总(附激活码)
- 6277次 2 联想拯救者win10一键恢复如何使用_联想win10一键还原孔使用方法
- 5819次 3 如何用u盘装系统？用系统城U盘启动制作盘安装Win10系统教程
- 5116次 4 怎么在u盘pe下给电脑系统安装ahci驱动
- 4682次 5 联想电脑开机出现PXE-MOF:Exiting Intel PXE ROM怎么解决
- 3947次 6 华硕笔记本bios utility ez mode设置图解以及切换成传统bios界面方法华硕笔记本bios utility ez mode设置图解以及切换成传统bios界面方法
- 3173次 7 win10怎么改为uefi启动_win10系统设置uefi启动模式的方法
- 1926次 8 CentOS 8 系统图形化安装教程（超详细）
- 1876次 9 win10系统下检测不到独立显卡如何解决
- 1850次 10 VMware中安装Linux系统（Redhat8）及虚拟机的网络配置方法
热门系统下载
- 4754次 1 雨林木风Win10专业版64位纯净版系统官方下载
- 4626次 2 Windows Server 2019 官方原版系统64位系统下载
- 4322次 3 网吧游戏专用Win7 Sp1 64位免激活旗舰版 V2021.05
- 4248次 4 Windows Server 2008 简体中文官方原版32位系统下载
- 3944次 5 Windows Server 2008 R2 简体中文官方原版64位系统下载
- 3784次 6 电脑公司ghost win7 64位纯净专业版v2019.08
- 3617次 7 电脑公司ghost win10 64位游戏专用精简网吧版v2020.05
- 3569次 8 Windows Server 2012 R2 官方原版系统64位系统下载
