在Html上選擇本機資料夾，自動讀取資料夾及子資料夾下的所有圖片並顯示在頁面。
技術分析：
存在問題呼叫Web API介面FileReader中readAsDataURL方法讀取資料（這個函數參數file標籤取得到的檔案路徑），然後把資料載入到FileReader中（base64格式），之後就可以用Img來指定來源時base64格式的數據，可以繪製圖片。
二碼 <!DOCTYPE html><html><head> <title>ReadImageDemo</title></head><body> <input type=file id=selectFiles onchange=dealSelectFiles() multiple webkitdirectory> <canvas id=myCanvas width=1440 width=1440 width=1440 width=1440 width=1440 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(Path.webkitR. // 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 >三效果以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。