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

最新推荐文章于 2024-06-22 17:42:39 发布

lomo_2019

最新推荐文章于 2024-06-22 17:42:39 发布

阅读量9.2k

点赞数

本文链接：https://blog.csdn.net/lomo_2019/article/details/97938080

版权

一目的
在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;

最低0.47元/天解锁文章

lomo_2019

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
Html读取本地文件夹下图片并显示的示例代码

一目的在Html上选择本地文件夹，自动读取文件夹及子文件夹下的所有图片并显示在页面。技术分析：存在问题Html中file标签获取到的路径时相对的。Html中Img指定源时需要的是绝对路径。解决方法：调用Web API接口FileReader中readAsDataURL方法读取数据（这个函数参数file标签获取到的文件路径），然后把数据加载到FileReader中（base64格式）...
复制链接

扫一扫