<p id="rrtt5"></p><ruby id="rrtt5"></ruby>

      系統城裝機大師 - 唯一官網:www.1999hs.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

      系統教程欄目

      欄目熱門教程

      人氣教程排行

      站長推薦

      熱門系統下載

      天堂资源中文WWW,久久精品女人天堂AV免费观看,无码专区一ⅤA亚洲V天堂,免费观看在线AⅤ天堂视频