亚洲精品中文字幕无码专区一,中文字幕av一区乱码深夜动态福利,粗大的内捧猛烈进出少妇

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

          系統教程欄目

          欄目熱門教程

          人氣教程排行

          站長推薦

          熱門系統下載

          亚洲精品中文字幕无码专区一,中文字幕av一区乱码深夜动态福利,粗大的内捧猛烈进出少妇