Html讀取本地文件夾下圖片并顯示的示例代碼
時間：2019-12-05來源：系統城作者：電腦系統城
一 目的
在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>
三 效果
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持我們。
分享到：
相關信息
-
-
-
2021-04-22
巧用 -webkit-box-reflect 倒影實現各類動效(小結) -
2021-04-22
HTML+CSS+JS實現圖片的瀑布流布局的示例代碼 -
2020-03-04
HTML5 video自定義視頻播放器
-
-
HTML5之audio屬性audio主要支持的音頻格式：mp3 ogg wav<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>audio</title></head><body> <!-- 方法一 --> <a...
2020-03-04
-
HTML連載72-動畫效果及其他屬性一、動畫效果 1.過渡與動畫相類似，都需要三要素，那么他們的區別在哪里呢？ ?答：過渡必須是人為的觸發才會執行動畫，動畫不需要人為的觸發就可以自動執行?動畫。 2.?相同點： （1）過度和動畫都是用來給元素添加動畫的；（2）過渡...
2020-03-04
熱門系統總排行
- 1569次 1 雨林木風Win10專業版64位純凈版系統官方下載
- 1417次 2 電腦公司ghost win7 64位純凈專業版v2019.08
- 913次 3 深度技術 GHOST WIN10 X64 純凈版 V2019.09（64位）
- 722次 4 電腦系統城ghost win7 sp132位 經典標準版 V2019.11
- 666次 5 電腦公司ghost win7 32位精簡旗艦版v2019.08
- 657次 6 深度技術ghost win10 64位專業破解版v2019.08
- 574次 7 電腦公司 GHOST XP SP3 安全穩定純凈版 V2019.08
- 568次 8 電腦公司 GHOST WIN10 X64 正式專業版 V2019.09（64位）
系統教程欄目
欄目熱門教程
人氣教程排行
- 43524次 1 VMware密鑰16 VMware虛擬機16版本激活密鑰大全教程
- 14956次 2 win10系統更新到57%出現死機的原因和解決方法
- 13627次 3 電腦免費的加速器有哪些 永久免費的四款加速器推薦
- 11634次 4 如果微信被同步了如何取消? 取消微信電腦與手機同步的技巧
- 11225次 5 win10添加打印機提示輸入碼無效怎么辦_win10打印機輸入碼無效解決方法
- 10715次 6 系統城推出鼠標引擎天梯圖2020_鼠標傳感器天梯圖2020
- 9426次 7 藍牙耳機長按無反應怎么辦 藍牙耳機長按燈不亮的處理方法
- 9399次 8 魯大師跑分100萬什么水平 魯大師跑分多少算好電腦
- 9250次 9 拯救者Y7000如何使用錄屏功能
- 8545次 10 由于找不到vcruntime140.dll無法繼續執行代碼的解決方法
站長推薦
- 4025次 1 聯想拯救者win10一鍵恢復如何使用_聯想win10一鍵還原孔使用方法
- 2407次 2 Win11怎么激活？Win11系統永久激活方法匯總(附激活碼)
- 2302次 3 怎么在u盤pe下給電腦系統安裝ahci驅動
- 1977次 4 聯想電腦開機出現PXE-MOF:Exiting Intel PXE ROM怎么解決
- 1807次 5 win10怎么改為uefi啟動_win10系統設置uefi啟動模式的方法
- 1800次 6 如何用u盤裝系統？用系統城U盤啟動制作盤安裝Win10系統教程
- 1486次 7 華碩筆記本bios utility ez mode設置圖解以及切換成傳統bios界面方法華碩筆記本bios utility ez mode設置圖解以及切換成傳統bios界面方法
- 915次 8 CentOS 8 系統圖形化安裝教程（超詳細）
- 825次 9 VMware中安裝Linux系統（Redhat8）及虛擬機的網絡配置方法
- 683次 10 win10系統下檢測不到獨立顯卡如何解決
熱門系統下載
- 2422次 1 網吧游戲專用Win7 Sp1 64位免激活旗艦版 V2021.05
- 1759次 2 電腦公司ghost win10 64位游戲專用精簡網吧版v2020.05
- 1616次 3 Windows Server 2019 官方原版系統64位系統下載
- 1569次 4 雨林木風Win10專業版64位純凈版系統官方下載
- 1417次 5 電腦公司ghost win7 64位純凈專業版v2019.08
- 1417次 6 系統之家win7系統安裝盤_系統之家ghost win7 64位免激活專業網吧專業完整版v2021.05下載
- 1208次 7 電腦公司Win7 Sp1 32位純凈旗艦版 V2021.05
- 1199次 8 UOS Desktop home 20 （1010）桌面個人版（64位）系統下載
