Html载入当地文档夹下照片并显示信息的示例编码

1 目地

在Html上挑选当地文档夹，全自动载入文档夹及子文档夹下的全部照片并显示信息在网页页面。

技术性剖析：

存在难题

  • Html中file标识获得到的相对路径时相对性的。
  • Html中Img特定源时必须的是肯定相对路径。

处理方式：

启用Web API插口FileReader中readAsDataURL方式载入数据信息（这个涵数主要参数file标识获得到的文档相对路径），随后把数据信息载入到FileReader中（base64文件格式），以后便可以用Img来特定源时base64文件格式的数据信息，能够绘图照片。

2 编码

<!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>

3 实际效果

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。