Select the local folder on Html, automatically read all pictures under the folder and subfolder and display them on the page.
Technical analysis:
Existing problems- The path obtained by the file tag in Html is relative.
- The absolute path is required when the source is specified by Img in Html.
- resolvent:
Call the readAsDataURL method in the Web API interface FileReader to read the data (the file path obtained by the function parameter file label), and then load the data into the FileReader (base64 format). After that, you can use image to specify the data in base64 format at the source time and draw pictures.
<!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>Three effect
Effect.gif