H5新增API-file相关

File对象

lastModified 最后一次修改时间(毫秒)
lastModifiedDate 最后一次修改日期
name 文件名
type 文件类型
size 文件大小

FileReader

  1. 构建FileReader实例
  2. 选择要使用的读取方式,如readAsDataURL(),将文件对象传递给该方法
  3. 监听读取完成事件onload,通过this.result得到读取结果
  4. 其它监听事件

以img为例,读取文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <input type="file" name="" id="myFile" value="" multiple>
</body>
<script type="text/javascript">
    var inp = document.querySelector("#myFile");
    inp.onchange = function(){
        console.log(this.files);

        for (var i = 0; i < this.files.length; i++) {
            var file = this.files[i];
            console.log(file);

            var fr = new FileReader();
            fr.readAsDataURL(file);
            fr.onload = function(){
                console.log(this.result);
                var img = new Image();
                img.src = this.result;
                document.body.appendChild(img);
            }
        }
    }

</script>
</html>

在console.log控制台中展现,第一句:“data:image/jpeg;base64,”表示base64编码。

Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,大家可以查看RFC2045~RFC2049,上面有MIME的详细规范。Base64编码可用于在HTTP环境下传递较长的标识信息。例如,在Java Persistence系统Hibernate中,就采用了Base64来将一个较长的唯一标识符(一般为128-bit的UUID)编码为一个字符串,用作HTTP表单和HTTP GET URL中的参数。在其他应用程序中,也常常需要把二进制数据编码为适合放在URL(包括隐藏表单域)中的形式。此时,采用Base64编码具有不可读性,即所编码的数据不会被人用肉眼所直接看到。

读取方式

readAsDataURL(file) 读取地址 base64
readAsText(file[,encoding]) 读取文本
readAsBinaryString(file) 以二进制读取

事件

onload 读取完成
onloadstart 开始读取
onloadend 结束读取 无论成功失败都会触发
onerror 触发错误
onabort 中断读取时触发

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,860评论 18 139
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,742评论 18 399
  • 在javascript的世界里无法处理二进制数据,如果需要处理,只能使用charCodeAt()方法,一个个字节地...
    我是上帝可爱多阅读 625评论 0 4
  • 简介 HTML5 终于为我们提供了一种通过 File API 规范与本地文件交互的标准方式。为了举例说明其功能,可...
    ddai_Q阅读 2,854评论 1 5
  • 山中犬吠夜已深, 茅屋独我渐昏沉。 没有处世万全法, 怎弃功名利禄心。
    樊小篱阅读 261评论 0 3