HTML5中的File API

时间 2019-12-12

标签 html5 html file api 栏目 HTML5 繁體版

原文原文链接

file　提供文件有关的信息

1. file对象

file对象的来源通常分为３种：javascript

（１）在<input type='file'>元素上选择上传文件后返回的Filelist对象；
（２）由拖放操做产生的DataTransfer对象；
（３）HTMLCanvasElement的mozGetAsFile() API；

此处讨论的是第一种，获取file对象：html

let file = e.target.files[0];//获取file 对象，当上传多个文件（图片）时，０表示第一个

属性：java

lastModified:　1496803445926;//所引用文件最后修改时间
lastModifiedDate: Wed Jun 07 2017 10:44:05 GMT+0800 (CST) {};//所引用文件最后修改时间的 Date 对象
name: "多Y图.svg";//所引用文件的名字
size: 1384;//返回文件的大小
type: "image/svg+xml";//返回文件的 多用途互联网邮件扩展类型
webkitRelativePath: "";//返回 File 相关的 path 或 URL

另，多张图片的上传原理相似，需注意如下三点：web

1.设置multiple
2.经过循环取出每张图片，放到指定地方
3.每次循环的时候从新new FileReader()对象

2. FileReader()对象

FileReader() 容许web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。异步

let reader = new FileReader();//建立新对象

属性:svg

error: 读取文件时发生的错误；
    readyState: 代表FileReader对象的当前状态；
    result: 读取到的文件内容，只在读取操做完成后才有效，数据格式取决于采用的读取操做；

方法:ui

abort()：停止该读取操做。
readAsText(file, encoding)：以纯文本的形式读取，result中的数据为字符串。
readAsDataURL(file)：result属性中将包含一个data:url格式的字符串。
readAsArrayBuffer(file): result属性中将包含一个ArrayBuffer对象。
readAsBinaryString(file)：读取文件的二进制源码。

事件处理程序this

onabort: 当读取操做被停止时调用
onerror：当读取操做发生错误时调用
onload: 当读取操做成功完成时调用
onloadend: 当读取操做完成时（无论成功仍是失败），在onload或者onerror以后调用
onloadstart: 当读取操做将要开始时调用
onprogress: 在读取数据过程当中周期性调用

3.示例

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="author" content="oscar999">
    <title>read</title>
  </head>
  <body>
    <input type="file" id="file" onchange="handleFiles(this.files)"/>
    <div id="filecontent"></div>

    <script>
      function handleFiles(files){
        if(files.length) {
          var file = files[0];
          var reader = new FileReader();
          reader.onload = function(e) {
          document.getElementById("filecontent").innerHTML = e.target.result;
          };
          reader.readAsText(file);
        }
      }
    </script>
  </body>
</html>

HTML5中的File API

file 提供文件有关的信息

1. file对象

2. FileReader()对象

3.示例

file　提供文件有关的信息