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

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

  • 相关阅读:
    2-Add Two Numbers
    1-Two Sum
    解决spark-shell输出日志过多的问题
    安装配置Hive
    src与bin版本的区别
    AES加密时抛出java.security.InvalidKeyException: Illegal key size or default parameters
    hosts文件修改问题
    Spark垃圾邮件分类(scala+java)
    Spark常用机器学习算法(scala+java)
    Spark自带Pi程序运行
  • 原文地址:https://www.cnblogs.com/BlingSun/p/9208819.html
Copyright © 2020-2023  润新知