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
热门系统总排行
- 3091次 1 雨林木风Win10专业版64位纯净版系统官方下载
- 2650次 2 电脑公司ghost win7 64位纯净专业版v2019.08
- 1749次 3 深度技术 GHOST WIN10 X64 纯净版 V2019.09（64位）
- 1356次 4 电脑系统城ghost win7 sp132位 经典标准版 V2019.11
- 1350次 5 Win11官方最新版系统下载_Ghost Win11 22000.434(KB5009566)专业免激活版下载
- 1271次 6 电脑公司ghost win7 32位精简旗舰版v2019.08
- 1270次 7 电脑公司 GHOST WIN10 X64 正式专业版 V2019.09（64位）
- 1261次 8 电脑公司 GHOST XP SP3 安全稳定纯净版 V2019.08
系统教程栏目
栏目热门教程
人气教程排行
- 50049次 1 联想笔记本进入bios的三种方法 联想笔记本怎么进入bios
- 47587次 2 打印机为什么打印出来是黑的_打印出来纸张表面黑的解决方法
- 38020次 3 笔记本电脑序列号在哪|笔记本电脑序列号怎么看
- 30229次 4 对于目标文件系统文件过大无法复制到u盘怎么解决方法
- 29322次 5 mac连上wifi却上不了网如何解决 网络没问题但mac无法上网怎么办
- 23102次 6 电脑免费的加速器有哪些 永久免费的四款加速器推荐
- 20506次 7 小马激活工具 Win10正版激活 一键完美激活Win10_小编亲测
- 18819次 8 打印机显示休眠不打印怎么办 打印机深度休眠不打印解决方法
- 17556次 9 鲁大师跑分100万什么水平 鲁大师跑分多少算好电脑
- 15924次 10 win10系统更新到57%出现死机的原因和解决方法
站长推荐
- 8811次 1 Win11怎么激活？Win11系统永久激活方法汇总(附激活码)
- 5470次 2 联想拯救者win10一键恢复如何使用_联想win10一键还原孔使用方法
- 3824次 3 联想电脑开机出现PXE-MOF:Exiting Intel PXE ROM怎么解决
- 3753次 4 怎么在u盘pe下给电脑系统安装ahci驱动
- 3115次 5 华硕笔记本bios utility ez mode设置图解以及切换成传统bios界面方法华硕笔记本bios utility ez mode设置图解以及切换成传统bios界面方法
- 3042次 6 如何用u盘装系统？用系统城U盘启动制作盘安装Win10系统教程
- 2587次 7 win10怎么改为uefi启动_win10系统设置uefi启动模式的方法
- 1527次 8 CentOS 8 系统图形化安装教程（超详细）
- 1461次 9 VMware中安装Linux系统（Redhat8）及虚拟机的网络配置方法
- 1416次 10 win10系统下检测不到独立显卡如何解决
热门系统下载
- 3310次 1 网吧游戏专用Win7 Sp1 64位免激活旗舰版 V2021.05
- 3091次 2 雨林木风Win10专业版64位纯净版系统官方下载
- 2957次 3 Windows Server 2019 官方原版系统64位系统下载
- 2698次 4 电脑公司ghost win10 64位游戏专用精简网吧版v2020.05
- 2650次 5 电脑公司ghost win7 64位纯净专业版v2019.08
- 2549次 6 Windows Server 2008 简体中文官方原版32位系统下载
- 2242次 7 系统之家win7系统安装盘_系统之家ghost win7 64位免激活专业网吧专业完整版v2021.05下载
- 2055次 8 UOS Desktop home 20 （1010）桌面个人版（64位）系统下载
