html5 文件api使用示例

原创

好派笔记

修改于 2021-11-02 10:53:18

7160

修改于 2021-11-02 10:53:18

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5文件API</title>
<script type="text/javascript">
function getName(){
       var file = document.getElementById("file");
       //document.getElementById("file").files 
       // 返回 FileList对象 
       var files = file.files;
      for(i=0;i<files.length;i++){
          //获取文件的名称 
          alert(files[i].name);
      }
   }
function getSize(){
       var file = document.getElementById("file1");

   var size =file.files[0].size;//显示文件的尺寸 
   /*
   excel:application/vnd.ms-excel
   word:application/msword(.doc), 
       application/vnd.openxmlformats-officedocument.wordprocessingml.document(.docx)
       实际应用中要根据具体的type类型 限制 上传的类型 ,用正则表达式验证 
   */
   var type =file.files[0].type;//文件的类型  image/png,image/jpeg,text/plain,text/html

   //对文件列表FileList才有意义,对file对象没有作用,也就是说上传单个文件也要有数组形式访问其属性 ..

   var name =file.files[0].name;
   document.getElementById("mark").innerHTML=type;
   alert(size+","+type+","+name);
 
}
</script>
</head>
<body>
<form action="">
   <!-- html5为文件域添加multiple="multiple"支持多文件上传，用逗号分隔 -->
   附件:<input type="file" id="file" multiple="multiple" onblur="getName();" >
   <!-- 添加accept属性 限制要选择的文件的类型，但只是在打开文件选择那一刻筛选出符合条件的文件
   ,例如:下面要求文件类型为图片,打开文件选择框时只会列出所有的图片文件;
   具体情况各大浏览器支持不一样: Firefox 列出所有文件，chrome自动筛选出符合条件的文件,IE9和FF一样，
   可以说不支持吧
    -->
   头像 : <input type="file" id="file1" accept="image/*">
      文件的类型:<mark id="mark"></mark>
   <input type="button" value="获取文件大小" onclick="getSize();">
   </form>
   <!-- FileReader接口 示例  -->
<input type="file" id="rd">
   <span id="msg"></span>
  <input type="button" value="以文本形式读取" onclick="readAsText();">
  <input type="button" value="以二进制形式读取" onclick="readAsBinaryString();">
  <input type="button" value="以dataURL形式读取" onclick="readAsDataURL();">
<script type="text/javascript">
var file = document.getElementById("rd");
if (typeof FileReader =="undefined"){
       msg.value="您的浏览器不支持FileReader";
       //禁用文件域 
       file.setAttribute("disabled","disabled");
   }
   else{
      console.info("恭喜您可以使用...");
   }
   //将文件读取为文本
     function readAsText(){

   var file = document.getElementById("rd").files[0];
   var reader = new FileReader();
   reader.readAsText(file);
   //onload 加载成功 后触发 
   reader.onload=function(e){
       var msg = document.getElementById("msg");
       //把读取到的文本信息显示 
       //msg.value=this.result;
       console.info(reader.result);
   }

 }
 //将文件读取为二进制
 
function readAsBinaryString(){

 var file = document.getElementById("rd").files[0];
   var reader = new FileReader();
   //二进制形式读取 
   reader.readAsBinaryString(file);
   //onload 加载成功 后触发 
   reader.onload=function(e){
       var msg = document.getElementById("msg");
       //把读取到的文本信息显示 
       //msg.value=this.result;

       console.info(reader.result);
       console.info("load触发,加载成功...");
   }
   //加载结束触发,不管成功失败 
   reader.onloadend=function(){
       console.info("loadend触发,加载结束...");
   }
   //开始加载触发 
   reader.onloadstart=function(){
       console.info("loadstart触发,开始加载...");
   }
   //记载出错触发 
   reader.onerror=function(){
       console.info("error触发,加载过程中出现错误...");
   }
   //中断记载触发 
   reader.onabort=function(){
       console.info("abort触发,加载中断触发...");
   }
   //记载进程 ,可用progress标签显示加载进度 
   reader.onprogress=function(){
       console.info("progress触发,加载中...");
   }

 }
 
//将文件读取为DataURL
 function readAsDataURL(){
     var file = document.getElementById("rd").files[0];
       var reader = new FileReader();
       //图片验证 
       if (!/image\/\w+/.test(file.type)){
           alert("只能输出图片");
           return ;
       }
       //二进制形式读取 
       reader.readAsDataURL(file);
       //onload 加载成功 后触发 
       reader.onload=function(e){
           var msg = document.getElementById("msg");
           //把读取到的文本信息显示 
           //msg.value=this.result;
           //console.info(reader.result);
           //把图片显示到页面中....
           msg.innerHTML='<img src='+this.result+' />';
       } 
 }
   </script>
</body>
</html></pre>

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

api