Select a local folder on Html, automatically read all pictures in the folder and subfolders and display them on the page.
Technical analysis:
There is a problemCall the readAsDataURL method in the Web API interface FileReader to read the data (the file path obtained by the file tag of this function parameter), and then load the data into the FileReader (base64 format). After that, you can use Img to specify the source data in base64 format. Pictures can be drawn.
Two codes <!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 effectsThe above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.