Html讀取本地資料夾下圖片並顯示
摘要：
一 目的
在Html上選擇本地資料夾，自動讀取資料夾及子資料夾下的所有圖片並顯示在頁面。
技術分析：
存在問題
Html中file標籤獲取到的路徑時相對的。
Html中Img指定源時需要的是絕對路徑。
解決方法：呼叫Web API介面FileReade...
一 目的
在Html上選擇本地資料夾，自動讀取資料夾及子資料夾下的所有圖片並顯示在頁面。
技術分析：
存在問題
- Html中file標籤獲取到的路徑時相對的。
- Html中Img指定源時需要的是絕對路徑。
- 解決方法：
呼叫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 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>
三 效果
效果.gif