HTML5+CSS3=充实笔记0621

350

收藏 2019-06-21

File对象与FileList对象
使用此两对象，实现上传文件界面的示例代码：

<!DOCTYPE html>
<html>
<head>
   <title>7.2.1.html</title>
   <meta charset="utf-8">
   <script type="text/javascript">
      function show(){
         var file, filelist, mySpan;
         file=document.getElementById("file");
         filelist = file.files;
         mySpan = document.getElementById("mySpan");
         var names="";
         for(var i=0; i<filelist.length; i++){
               names += filelist.name + "<br />";
         }
         mySpan.innerHTML=names;
      }
   </script>
</head>
<body>
   <input type="file" id="file" multiple />
   <input type="button" id="button" value="上传文件" />
   <br />
   <span id="mySpan"></span>
</body>
</html>

FileReader对象
用于读取文件里面的数据，进入内存。根据文件类型不一样，可选择不同的方法读取文件（异步读取文件的过程中，可以触发多个事件）

4个方法
readAsBinaryString以二进制方式读取文件
readAsText以文本方式读取
readAsDataURL以DataURL读取文件
abort中断读取操作