Html sample code for reading and displaying pictures in a local folder

One purpose

Select a local folder on the Html page to automatically read all the images in the folder and its subfolders and display them on the page.

Technical Analysis:

Problems

The path obtained by the file tag in Html is relative.
When specifying the source in Img in Html, an absolute path is required.

Solution:

Call the readAsDataURL method in the Web API interface FileReader to read the data (the file path obtained by the function parameter file tag), and then load the data into FileReader (base64 format). After that, you can use Img to specify the source data in base64 format and draw pictures.

Second code

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

Three effects

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: Commonly used js function methods in the front end

>>: Detailed explanation of scp and sftp commands under Linux

Example of using CSS to achieve semi-transparent background and opaque text

Html sample code for reading and displaying pictures in a local folder

Example of using CSS to achieve semi-transparent background and opaque text

How to manage multiple projects on CentOS SVN server

Mysql practical exercises simple library management system

CSS Summary Notes: Examples of Transformations, Transitions, and Animations

Sample code for implementing Alipay sandbox payment with Vue+SpringBoot

How to prevent event bubbling in JavaScript

WebWorker encapsulates JavaScript sandbox details

MySQL 5.6.23 Installation and Configuration Environment Variables Tutorial

Div covers the flash. Flash transparent method realizes placing the DIV layer on the flash.

Implementation of mysql split function separated by commas

Recommend

Webpack builds scaffolding to package TypeScript code

A brief discussion on JavaScript throttling and anti-shake

How to specify parameter variables externally in docker

Example analysis of the impact of MySQL index on sorting

Introduction to document.activeELement focus element in JavaScript

Sample code for making desktop applications with vue + Electron

Summary of Node.js service Docker container application practice

A brief discussion on MySql views, triggers and stored procedures

Simple usage example of MySQL 8.0 recursive query

js to realize login and registration functions

Detailed explanation of the idea of distributed lock in MySQL with the help of DB

Understand the implementation of Nginx location matching in one article

JD Vue3 component library supports the detailed process of mini program development

jQuery plugin to achieve code rain effect

Two ways to visualize ClickHouse data using Apache Superset