HTML5 文件上传

怼烎@ 2023-08-17 16:20 152阅读 0赞

HTML5 文件上传

另参考 http://www.jianshu.com/p/46e6e03a0d53

1 filelist对象与file对象：

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

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

其属性1：size 表示文件大小

属性2：type 表示文件类型 如image/png

1 var file;
    2 file = document.getElementById("file").files[0];
    3 file.size;     //当前上传文件的大小
    4 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>

转载于:https://www.cnblogs.com/yxiaoqian/p/5617439.html