js讀取文件fileReader

時間 2019-11-12

原文原文鏈接

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr">  
 <head>   
    
 </head>   
 <body>   
    <input type="file" id="file" > <!-- 只能上傳單個文件 -->  
    <input type="file" id="files" multiple> <!-- 能夠上傳多個文件 -->  
    <input type="file" accept="image/*"/> 設置上傳文件類型，這樣打開文件的時候會只出現符合該類型的文件。

或者列出詳細的類型如：<input type="file" accept="image/x-png,image/gif,image/jpeg,image/bmp" />

    <script>  
        window.onload=function(){  
            var f = document.getElementById("file");  
            var fs = document.getElementById("files");  
              
            //this.files即獲取input中上傳的file對象 是個數組   
            f.onchange = function(){  
                //獲取文件對象  
                var file = this.files[0];  
                //使用fileReader對文件對象進行操做  
                var reader = new FileReader();  
                //將文件讀取爲arrayBuffer  
                //reader.readAsArrayBuffer(file);  
                //reader.onload = function(){  
                //  console.log(reader.result);  
                //}  
                  
                  
                /*reader.readAsBinaryString(file);  
                reader.onload = function(){  
                    console.log(reader.result);  
                }  
                */  
                //用於圖片顯示不須要傳入後臺，reader.result的結果是base64編碼數據，直接放入img的src中便可  
                reader.readAsDataURL(file);  
                reader.onload = function(){  
                    console.log(reader.result);  
                }  
            }  
              
              
            fs.onchange = function(){  
                  
            }  
        }  
    </script>  
 </body>  
</html>

Valid Accept Types:

For CSV files (.csv), use: 

<input type="file" accept=".csv" />
For Excel Files 2003-2007 (.xls), use: 

<input type="file" accept="application/vnd.ms-excel" />
For Excel Files 2010 (.xlsx), use: 

<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
For Text Files (.txt) use: 

<input type="file" accept="text/plain" />
For Image Files (.png/.jpg/etc), use: 

<input type="file" accept="image/*" />
For HTML Files (.htm,.html), use:

<input type="file" accept="text/html" />
For Video Files (.avi, .mpg, .mpeg, .mp4), use:

<input type="file" accept="video/*" />
For Audio Files (.mp3, .wav, etc), use:

<input type="file" accept="audio/*" />
For PDF Files, use:

<input type="file" accept=".pdf" />

有個缺點，在設置後瀏覽器打開選擇文件窗口時會自動篩選的文件夾下全部符合設定類型的文件，形成文件窗口延遲必定時間。 html

優化的方法是列出你須要的詳細類型，好比：數組

For Image Files (.png/.jpg/etc), use: 

<input type="file" accept="image/x-png,image/gif,image/jpeg,image/bmp" />

這樣打開的速度就快不少了瀏覽器

相關標籤/搜索

filewriter&filereader

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。