Sélectionnez un dossier local sur HTML, lisez automatiquement toutes les images du dossier et des sous-dossiers et affichez-les sur la page.
Analyse technique :
Il y a un problèmeAppelez la méthode readAsDataURL dans l'interface API Web FileReader pour lire les données (le chemin du fichier obtenu par la balise file de ce paramètre de fonction), puis chargez les données dans FileReader (format base64). Après cela, vous pouvez utiliser Img pour. spécifiez les données source au format base64. Des images peuvent être dessinées.
Deux codes<!DOCTYPE html><html><head> <title>ReadImageDemo</title></head><body> <input type=file id=selectFiles onchange=dealSelectFiles() plusieurs répertoires webkit> <canvas id=myCanvas width=1440 hauteur=900></canvas> <script type=text/javascript> var imgPosX = 0; 256 ; function dealSelectFiles(){ /// obtenir des fichiers sélectionnés. var selectFiles = document.getElementById(selectFiles).files; for(var file of selectFiles){ console.log(file.webkitRelativePath); var reader = new FileReader(); reader.readAsDataURL(file); reader.onloadend = function(){ /// données de transaction var img = new. Image(); /// après le chargeur, stockage du résultat du fichier img.src = this.result; img.onload = function(){ var myCanvas = document.getElementById(myCanvas); '2d'); cxt.drawImage(img, imgPosX, 0); imgPosX += imgWidth; } } } </script></body></html>trois effets
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.