h5新特性 File API详解
之前一直觉得h5的新特性就是一些新标签呢,直到想研究一下图片上传预览的原理,才发现还是有好多新的api的,只是不兼容ie低版本,挺可惜的,
File API在表单中文件输入字段基础上,又添加了一些直接访问文件信息的接口。H5在DOM中为文件输入元素添加了一个files集合,在通过表单元素选择了一个或多个文件时,files集合中将包含一组file对象,每个file对象对应一个文件,每个file对象都有下列只读属性:
1、name:本地文件系统的文件名;
2、size:文件的字节大小;
3、type:字符串,文件的MIME类型;
4、lastModifiedDate:字符串,文件上一次被修改的事件,(只有chrome实现了这个属性)
例子:
现在我们获取id为“files-list”的input,type为file,的元素,将该元素上传的文件输出到控制台:
FileReader类型:
FileReader类型实现的是一种异步的文件读取机制,可以把fileReader想象成XMLHttpResquest,区别就是FileReader读取的是文件,而不是远程服务,为了读取文件中的数据,FileReader提供了如下几种方法:
1、readAsTxt,以纯文本的形式读取文件,将读取到的文件保存到result属性中;
2、readAsDataURL,读取文件,并将文件数据URL保存到result属性中;
3、readAsArrayBuffer,读取文件,并将
没写完呢,放假回家
h5新特性 File API详解的更多相关文章
- Swift 3 新特性和迁移详解
写在前面 Swift 3.0 正式版发布了差不多快一个月了,断断续续的把手上和 Swift 相关的迁移到了Swift 3.0.所以写点小总结. 背景 代码量(4万行) 首先,我是今年年初才开始入手 S ...
- IOS6 新特性之UIActivityViewController详解
新的IOS6增加了一些新特性.因为应用需要,所以在国庆的几天里.研究了一下IOS6的说明文档,然后大概地总结了一下UIActivityViewController的用法与大家分享. 首先 从实际效果入 ...
- Android新特性Instant Run详解
关于 Instant Run Android Studio 2.0 中引入的 Instant Run 是 Run 和 Debug 命令的行为,可以大幅缩短应用更新的时间.尽管首次构建可能需要花费较长的 ...
- java8 array、list操作 汇【3】)(-Java8新特性之Collectors 详解
//编写一个定制的收集器 public static class MultisetCollector<T> implements Collector<T, Multiset<T ...
- [C++11新特性] 智能指针详解
动态内存的使用很容易出问题,因为确保在正确的时间释放内存是极为困难的.有时我们会忘记释放内存产生内存泄漏,有时提前释放了内存,再使用指针去引用内存就会报错. 为了更容易(同时也更安全)地使用动态内存, ...
- Spring Boot 2.3 新特性优雅停机详解
什么是优雅停机 先来一段简单的代码,如下: @RestController public class DemoController { @GetMapping("/demo") p ...
- H5新特性---SVG--椭圆--直线--文本--滤镜(高斯滤镜--模糊)--地理定位
今天的目标 3.1:h5新特性--SVG--椭圆 <ellipse rx="" ry="" cx="" cy="" ...
- 【repost】H5的新特性及部分API详解
h5新特性总览 移除的元素 纯表现的元素: basefont.big.center.font等 对可用性产生负面影响的元素: frame.frameset.noframes 新增的API 语义: 能够 ...
- Java8学习笔记(五)--Stream API详解[转]
为什么需要 Stream Stream 作为 Java 8 的一大亮点,它与 java.io 包里的 InputStream 和 OutputStream 是完全不同的概念.它也不同于 StAX 对 ...
随机推荐
- Eclipse 菜单
Eclipse 菜单 Eclipse 查看的菜单栏通常包含以下几个菜单: File 菜单 Edit 菜单 Navigate 菜单 Search 菜单 Project 菜单 Run 菜单 Window ...
- Unity3D学习笔记——UIScrollBar和UIScrollView使用
UIScrollBar和UIScrollView结合使用效果图如下: 一:使用步骤 1.创建一个UIScrollView 2.然后创建一个UIScrollBar 3.打开UIScrollView ...
- Nginx模块系列之auth_basic模块
1.1 介绍 ngx_http_auth_basic_module模块实现让访问着,只有输入正确的用户密码才允许访问web内容.web上的一些内容不想被其他人知道,但是又想让部分人看到.nginx的h ...
- 2016-06-19 NOIP模拟赛
2016-06-19 NOIP模拟赛 by coolyangzc 共3道题目,时间3小时 题目名 高级打字机 不等数列 经营与开发 源文件 type.cpp/c/pas num.cpp/c ...
- 【BZOJ2721】[Violet 5]樱花 线性筛素数
[BZOJ2721][Violet 5]樱花 Description Input Output Sample Input 2 Sample Output 3 HINT 题解:,所以就是求(n!)2的约 ...
- 九度OJ 1359:大魏树遍历 (树)
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:299 解决:29 题目描述: 大魏是JOBDU技术组里最喜欢折腾的一个了,单反.骑车.改九度页面,当然还有YY prado.我们姑且先把这些 ...
- bat masterNodeRun.bat
C:\> compare C:\> compare C:\>D:\cmd\wphp.bat C:\> compareReq -- :: TODO StartScript -- ...
- 将电脑中编写的app网页放到手机上访问
http://jingyan.baidu.com/article/3065b3b6e5becdbecff8a4d5.html 1.在控制面板-管理工具找不到IIS,则先在程序-打开或关闭window功 ...
- 使用Sentry集中化日志管理
在调试程序中,通过日志分期来排查BUG是一个重要手段,它可以说是程序调试的利器. 关于日志管理 随着应用组件变多,那么各coder对输出日志五花八门,有写入stdout,有写stderr, 有写到sy ...
- javafx tableview 设置多选
id_resultTable.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);