利用input type=file和FileReader API实现在浏览器客户端通过选择对话框读取文件

如题，利用input type=file和FileReader API实现在浏览器客户端通过选择对话框读取文件，代码如下，以读取文本文件为例：

 

[javascript] view plaincopy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.     <title><input> File Selection</title>  
  5.   </head>  
  6.   <body>  
  7.     <h1>HTML5 <input> File Selection</h1>  
  8.     <h3>Example 1</h3>  
  9.     <input type="file" id="fileSelector" multiple />  
  10.     <script type="text/javascript">  
  11.       var message = [];  
  12.   
  13.       if (!document.getElementById('fileSelector').files) {  
  14.         message = '<p>浏览器不支持FileReader API</p>';  
  15.         
  16.         document.querySelector('body').innerHTML = message;  
  17.       }  
  18.       else {  
  19.         document.getElementById('fileSelector').addEventListener('change', handleFileSelection, false);  
  20.       }  
  21.         
  22.       function handleFileSelection(evt) {      
  23.         var files = evt.target.files;    
  24.         if (!files) {  
  25.           msa.alert("<p>At least one selected file is invalid - do not select any folders.</p><p>Please reselect and try again.</p>");  
  26.           return;  
  27.         }  
  28.           
  29.         var fileType = files[0].type;  
  30.           
  31.         reader = new FileReader();  
  32.           
  33.         if (fileType.indexOf('text/plain') == -1) {  
  34.             alert('请选择文本文件~');  
  35.             return;  
  36.         }  
  37.   
  38.         reader.onload = function(e) {  
  39.             console.log(this.result);  
  40.         }  
  41.         reader.readAsText(files[0]);  
  42.       }  
  43.     </script>  
  44.   </body>  
  45. </html>  


 

 
 
posted @ 2015-12-20 10:18  WTWLV  阅读(145)  评论(0)    收藏  举报