H5新增API-file相关
2017-07-17 本文已影响237人
月光在心中
File对象
lastModified 最后一次修改时间（毫秒）
lastModifiedDate 最后一次修改日期
name 文件名
type 文件类型
size 文件大小
FileReader
- 构建FileReader实例
- 选择要使用的读取方式，如readAsDataURL()，将文件对象传递给该方法
- 监听读取完成事件onload，通过this.result得到读取结果
- 其它监听事件
以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 中断读取时触发
