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

  发布时间:2018-12-13 16:08:52   作者:Hank_谢旱   我要评论
这篇文章主要介绍了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>

三 效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持澳门金沙网上娱乐。

相关文章

  • n个容器元素实现无限滚动的实现代码

    这篇文章主要介绍了n个容器元素实现无限滚动的实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起
    2019-10-16
  • 使用html2canvas对有百度地图的Dom元素处理成图片的解决

    这篇文章主要介绍了使用html2canvas对有百度地图的Dom元素处理成图片的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们
    2019-10-12
  • 解决移动端跳转问题(CSS过渡、target伪类)

    这篇文章主要介绍了解决移动端跳转问题(CSS过渡、target伪类),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编
    2019-10-10
  • viewport 的基本原理以及详细使用方法

    这篇文章主要介绍了viewport 的基本原理以及详细使用方法,需要的朋友可以参考下
    2019-10-05
  • 浅谈HTML中src和href之间的区别

    这篇文章主要介绍了浅谈HTML中src和href之间的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习
    2019-09-17
  • html 仿百度百科导航下拉菜单功能

    这篇文章主要介绍了html 仿百度百科导航下拉菜单功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-04
  • HTML6实现折叠菜单与手风琴菜单的实例代码

    这篇文章主要介绍了HTML6实现折叠菜单与手风琴菜单的实例代码,需要的朋友可以参考下
    2019-08-28
  • HTML中的if判断用法

    这篇文章主要介绍了 HTML中的if判断用法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-21
  • 详解html的几种水平垂直居中的方式(基础)

    这篇文章主要介绍了详解html的几种水平垂直居中的方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学
    2019-08-20
  • html中常用的转义字符总结

    这篇文章主要介绍了html中常用的转义字符总结,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-20

最新评论