HTML5:File API

给大家5秒钟时间,想想这几个需求怎么搞?

  • 文件上传时显示进度;
  • 图片上传前进行预览;
  • 多文件批量上传;
  • 拖拽式文件上传;

如果都能给出答案

就不用往下看了

你就是前端扛把子

...继续...

H5 提供了一组简洁有效的文件操作接口:File API

主要涉及:

FileList:用户通过file控件或拖拽选择的一组文件; File:FileList里面放的就是File; Blob:代表一段二进制数据,File就是继承自Blob; FileReader:用于从File、Blob中读取数据; FormData:用Ajax实现上传、进度显示时会用到;

特别注意:

H5 的 File API 虽然可以让我们访问本地文件系统,但只能被动地读取,也就是说只有用户主动触发了文件读取行为(比如通过file控件选择选择文件或拖拽文件),才能访问到File API;

浏览器兼容性(意料之中...IE必然不靠谱...):

示例1:获取FileList、File

方式1:通过表单file控件获取;

方式2:通过拖拽文件获取;

示例2:用FileReader实现图片预览

FileReader 是一种异步文件读取机制,用于读取File、Blob中的文件数据。

常用接口:

readAsText(Blob|File, opt_encoding): 用于将 Blob 或 File 对象,按指定的编码(默认UTF-8),转化为字符串形式;

readAsDataURL(Blob|File): 用于将 Blob 或 File 对象,转换为一个基于base64编码的Data URL对象。(文件上传前预览就是靠这个技术)

示例:多选图片并预览

示例3:文件上传时展示进度

XMLHttpRequest 在 HTML5 规范中引入了几个新特性:

  • 上传或者下载中的进度事件(onprogress);
  • 支持上传文件(File、Blob、FormData);
  • 等....

示例:文件上传时展示进度

OK...写完了...终于...

原文发布于微信公众号 - WebJ2EE(WebJ2EE)

原文发表时间:2018-06-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券