HTML5 读取上传文件

亦凉 2023-02-22 15:53 15阅读 0赞

1 filelist对象与file对象：

<input type="file" id="file" multiple>     //multiple可上传多个文件
    <input type="button" onclick="showFileName()" value="文件上传">
    <script>
    function showFileName(){
          var file;       //创建file对象
          for(var i;i<document.getElementById("file").files.length;i++){
              file = document.getElementById('file').files[i];   //.files
              console.log(file.name);
           }
    }
    </script>

2 Blob对象：表示原始的二进制数据,file继承自blob。

*  其属性1：size 表示文件大小 
 *  属性2：type 表示文件类型  如image/png

var file;
    file = document.getElementById("file").files[0];
    file.size;     //当前上传文件的大小
    file.type;  
    3 Filereader对象
    包含5个对象：

*  readAsBinaryString    将文件数据读取为二进制数据字符串
 *  readAsText   将文件数据读取为文本数据
 *  readAsDataURL   图像路径
 *  readArrayBuffer  
 *  abort       中断

6个事件：

*  onabord     
 *  onerror   
 *  onloadstart    
 *  onload     
 *  onloadend
 *  onprogress 监听进度

<input type="file" id="file">
    <input type='button' value='读取图像‘ onclick='readAsDataURL()'>
    <input type='button' value=读取二进制’ onclick=''>
    <input type='button value='读取文本文件‘ onclick=''>
    <div id='result' name='result>
    <script>
    var result = document.getElementById('result');
    var file = document.getElementById('file');
    
    function readAsDataURL(){
             var  file = document.getElementById('file').files[0];
             var reader  = new FileReader();  //创建filereader对象
             reader.readAsDataURL(file);       //读取图片文件
             reader.onload = function(ofile){
                  var resultimg = document.getElementById('result');
                  resultimg.innerHTML = '<img src="'+ofile.target.result+'"+alt="">';
             }
    }
    
    function readAsText(){
               var file = document.getElementById('file').files[0];
               var reader = new FileReader();
               reader.readAsText(file);   //读取文本内容
               reader.onload = function(e){
                    var resulttxt = document.getElementById('result');
                    resulttxt.innerHTML = e.target.result;
               }
    }
    </script>