js读取文件fileReader 

<!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" />

有个缺点，在设置后浏览器打开选择文件窗口时会自动筛选的文件夹下所有符合设定类型的文件，造成文件窗口延迟一定时间。 

 

优化的方法是列出你需要的详细类型，比如：

 

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

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

这样打开的速度就快很多了

posted @ 2018-06-21 14:16  申小贺  阅读(13859)  评论(0)    收藏  举报