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
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
Recommend
Example method to view the IP address connected to MySQL
Specific method: First open the command prompt; T...
JavaScript web form function communication full of practical information
1. Introduction Earlier we talked about the front...
Can't connect to local MySQL through socket '/tmp/mysql.sock' solution
Error message: ERROR 2002: Can't connect to l...
Docker modifies the configuration information of an unstarted container
When I first used docker, I didn't use docker...
Mysql NULL caused the pit
Using NULL in comparison operators mysql> sele...
How to handle forgotten passwords in Windows Server 2008 R2
What to do if you forget Windows Server 2008R2 So...
ReactJs Basics Tutorial - Essential Edition
Table of contents 1. Introduction to ReactJS 2. U...
Detailed explanation of nginx current limiting module in Nginx source code research
Table of contents 1. Current limiting algorithm 2...
The difference between ID and Name attributes of HTML elements
Today I am a little confused about <a href=&quo...
Ubuntu Server Installation Tutorial in Vmware
This article shares with you the Ubuntu server ve...
CentOS 6 uses Docker to deploy redis master-slave database operation example
This article describes how to use docker to deplo...
How to build a new image based on an existing image in Docker
Building new images from existing images is done ...
Detailed explanation of basic concepts of HTML
What is HTML? HTML is a language used to describe...
Docker starts the elasticsearch image and solves the error after mounting the directory
Downloaded an es image from docker hub, version 6...
MySQL master-slave replication configuration process
Main library configuration 1. Configure mysql vim...