使用FileReader對象的readAsDataURL方法來讀取圖像文件

時間 2019-11-18

標籤使用 filereader 對象 readasdataurl 方法讀取圖像文件简体版

原文原文鏈接

FileReader對象的readAsDataURL方法能夠將讀取到的文件編碼成Data URL。Data URL是一項特殊的技術，能夠將資料(例如圖片)內嵌在網頁之中，不用放到外部文件。使用Data URL的好處是，您不須要額外再發出一個HTTP 請求到服務器端取得額外的資料；而缺點即是，網頁的大小可能會變大。它適合應用在內嵌小圖片，不建議將大圖像文件編碼成Data URL來使用。您的圖像文件不可以超過瀏覽器限定的大小，不然沒法讀取圖像文件。javascript

參考如下使用readAsDataURL讀取圖像文件範例：html

 
         <!DOCTYPE html> 
        
         <html xmlns =  
         "http://www.w3.org/1999/xhtml" 
         > 
        
         <head> 
        
         <title> </title> 
        
         <script type =  
         "text/javascript" 
         > 
        
         function ProcessFile( e ) {  
        
         var file = document.getElementById( 
         'file' 
         ).files[ 
         0 
         ]; 
        
         if 
         (file) { 
        
         var reader =  
         new 
         FileReader(); 
        
         reader.onload = function ( event ) {  
        
         var txt = event.target.result; 
        
         document.getElementById( 
         "result" 
         ).innerHTML = txt; 
        
         }; 
        
         } 
        
         reader.readAsDataURL( file ); 
        
         } 
        
         function contentLoaded () { 
        
         document.getElementById( 
         'file' 
         ).addEventListener(  
         'change' 
         , 
        
         ProcessFile ,  
         false 
         ); 
        
         } 
        
         window.addEventListener(  
         "DOMContentLoaded" 
         , contentLoaded ,  
         false 
         ); 
        
         </script> 
        
         </head> 
        
         <body> 
        
         請選取一個圖像文件: <input type =  
         "file" 
         id =  
         "file" 
         name =  
         "file" 
         /> 
        
         <div id =  
         "result" 
         > </div> 
        
         </body> 
        
         </html>

readAsDataURL方法會使用base-64進行編碼，編碼的資料由data字串開始，後面跟隨的是MIME type，而後再加上base64字串，逗號以後就是編碼過的圖像文件的內容。java

使用Img顯示圖像文件jquery

若想要將讀取出來的圖像文件，直接顯示在網頁上，您能夠透過JavaScript創建一個<img>標籤，再設定src屬性爲Data URL，再將<img>標籤加入DOM之中，例如如下範例所示：web

 
         <!DOCTYPE html> 
        
         <html xmlns =  
         "http://www.w3.org/1999/xhtml" 
         > 
        
         <head> 
        
         <title> </title> 
        
         <script type =  
         "text/javascript" 
         > 
        
         function ProcessFile( e ) {  
        
         var file = document.getElementById( 
         'file' 
         ).files[ 
         0 
         ]; 
        
         if 
         ( file ) { 
        
         var reader =  
         new 
         FileReader(); 
        
         reader.onload = function ( event ) {  
        
         var txt = event.target.result; 
        
         var img = document.createElement( 
         "img" 
         ); 
        
         img.src = txt; 
        
         document.getElementById( 
         "result" 
         ).appendChild( img ); 
        
         }; 
        
         } 
        
         reader.readAsDataURL( file ); 
        
         } 
        
         function contentLoaded() { 
        
         document.getElementById( 
         'file' 
         ).addEventListener(  
         'change' 
         , 
        
         ProcessFile ,  
         false 
         ); 
        
         } 
        
         window.addEventListener(  
         "DOMContentLoaded" 
         , contentLoaded ,  
         false 
         ); 
        
         </script> 
        
         </head> 
        
         <body> 
        
         請選取一個圖像文件: <input type =  
         "file" 
         id =  
         "file" 
         name =  
         "file" 
         /> 
        
         <div id =  
         "result" 
         > </div> 
        
         </body> 
        
         </html>

讀取部分文件瀏覽器

有時想要讀取的文件太大，想要分段進行讀取；或者只想要讀取文件部分的內容，這時您能夠將文件切割，根據瀏覽器的不一樣，能夠使用如下方法：服務器

webkitSlice：適用於支持Webkit引擎的瀏覽器，如Chrome。
mozSlice：適用於Firefox。app

這兩個方法要傳入開始的位元組索引，以及結尾的位元組索引，索引以0開始。如下程式範例以FileReader對象的readAsBinaryString方法來讀取文件，只讀取文件的第三個位元組讀取到第六個位元組：post

 
         <!DOCTYPE html> 
        
         <html xmlns = 
         "http://www.w3.org/1999/xhtml" 
         > 
        
         <head> 
        
         <title> </title> 
        
         <script type =  
         "text/javascript" 
         > 
        
         function ProcessFile( e ) { 
        
         var file = document.getElementById(  
         'file' 
         ).files[ 
         0 
         ]; 
        
         if 
         ( file ) { 
        
         var reader =  
         new 
         FileReader (); 
        
         reader.onload = function ( event ) { 
        
         var txt = event.target.result; 
        
         document.getElementById(  
         "result" 
         ).innerHTML = txt; 
        
         }; 
        
         } 
        
         if 
         ( file.webkitSlice ) { 
        
         var blob = file.webkitSlice(  
         2 
         ,  
         4 
         ); 
        
         }  
         else 
         if 
         ( file.mozSlice ) { 
        
         var blob = file.mozSlice(  
         2 
         ,  
         4 
         ); 
        
         } 
        
         reader.readAsBinaryString( blob ); 
        
         } 
        
         function contentLoaded() { 
        
         document.getElementById(  
         'file' 
         ).addEventListener(  
         'change' 
         , 
        
         ProcessFile ,  
         false 
         ); 
        
         } 
        
         window.addEventListener(  
         "DOMContentLoaded" 
         , contentLoaded ,  
         false 
         ); 
        
         </script> 
        
         </head> 
        
         <body> 
        
         <input type =  
         "file" 
         id =  
         "file" 
         name =  
         "file" 
         /> 
        
         <div id =  
         "result" 
         > </div> 
        
         </body> 
        
         </html>

相關標籤/搜索