这篇文章主要介绍了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" 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>

三 效果

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

最新资讯
苹果与博通签订两份合作协议 后者有望赚150亿美元

苹果与博通签订两份合

博通周四下午披露,与苹果公司达成了价值150亿美元的新
苹果申请自动驾驶汽车专利 Siri或成你的私人司机

苹果申请自动驾驶汽车

苹果公司想申请一项新技术的专利,这项技术可以让你使用
顺丰宣布捐助2000万元 用于抗击疫情

顺丰宣布捐助2000万元

顺丰宣布将捐助2000万元人民币,以帮助湖北省抗击疫情。
驰援湖北 好未来设立1亿元抗击疫情专项基金

驰援湖北 好未来设立1

新型肺炎疫情引起全国关注,好未来教育集团决定设立1亿
平安好医生提供免费线上问诊 并发放1000万只口罩

平安好医生提供免费线

平安好医生宣布成立抗击病毒指挥中心,为全国人民提供免
互联网助力疫情防控 阿里推出湖北地区在线义诊

互联网助力疫情防控

针对新型肺炎湖北居民民众看病难的问题,1月24日晚,阿里
最新文章
html浮动提示框功能的实现代码

html浮动提示框功能的

这篇文章主要介绍了html浮动提示框功能的实现代码,需
详解HTML中的图片标签的用法

详解HTML中的图片标签

这篇文章主要介绍了详解HTML中的图片标签的用法,本文
使用html-webpack-plugin'入再内存中生成 html 页面插件

使用html-webpack-plu

这篇文章主要介绍了使用html-webpack-plugin'入再内
HTML实现2列布局(左侧宽度固定,右侧自适应)的方法示例

HTML实现2列布局(左侧

这篇文章主要介绍了HTML实现2列布局(左侧宽度固定,右侧
Html读取本地文件夹下图片并显示的示例代码

Html读取本地文件夹下

这篇文章主要介绍了Html读取本地文件夹下图片并显示的
详解 html area标签

详解 html area标签

area 元素总是嵌套在 <map> 标签中。本文重点给大家介