<optgroup id="srizi"></optgroup>

<optgroup id="srizi"></optgroup>

系統城裝機大師 - 唯一官網:www.jasafloorhardener.com!

當前位置:首頁 > 網頁制作 > HTML/Xhtml > 詳細頁面

Html讀取本地文件夾下圖片并顯示的示例代碼

時間:2019-12-05來源:系統城作者:電腦系統城

一 目的

在Html上選擇本地文件夾,自動讀取文件夾及子文件夾下的所有圖片并顯示在頁面。

技術分析:

存在問題

  • Html中file標簽獲取到的路徑時相對的。
  • Html中Img指定源時需要的是絕對路徑。

解決方法:

調用Web API接口FileReader中readAsDataURL方法讀取數據(這個函數參數file標簽獲取到的文件路徑),然后把數據加載到FileReader中(base64格式),之后就可以用Img來指定源時base64格式的數據,可以繪制圖片。

二 代碼


 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>ReadImageDemo</title>
  5. </head>
  6. <body>
  7. <input type="file" id="selectFiles" onchange="dealSelectFiles()" multiple webkitdirectory>
  8. <canvas id="myCanvas" width=1440 height=900></canvas>
  9.  
  10. <script type="text/javascript">
  11. var imgPosX = 0;
  12. var imgWidth = 256;
  13. function dealSelectFiles(){
  14. /// get select files.
  15. var selectFiles = document.getElementById("selectFiles").files;
  16.  
  17. for(var file of selectFiles){
  18. console.log(file.webkitRelativePath);
  19. /// read file content.
  20. var reader = new FileReader();
  21. reader.readAsDataURL(file);
  22. reader.onloadend = function(){
  23. /// deal data.
  24. var img = new Image();
  25. /// after loader, result storage the file content result.
  26. img.src = this.result;
  27. img.onload = function(){
  28. var myCanvas = document.getElementById("myCanvas");
  29. var cxt = myCanvas.getContext('2d');
  30. cxt.drawImage(img, imgPosX, 0);
  31. imgPosX += imgWidth;
  32. }
  33. }
  34. }
  35. }
  36. </script>
  37. </body>
  38. </html>

三 效果

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持我們。

分享到:

相關信息

  • 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

系統教程欄目

欄目熱門教程

人氣教程排行

站長推薦

熱門系統下載

久久大香久久久尹人尹人