html中回到上一个文件夹,HTML5中的File API

file　提供文件有关的信息

1. file对象

file对象的来源一般分为３种：

(１)在元素上选择上传文件后返回的Filelist对象；

(２)由拖放操作产生的DataTransfer对象；

(３)HTMLCanvasElement的mozGetAsFile() API；

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

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

属性：

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

另，多张图片的上传原理类似，需注意以下三点：

1.设置multiple

2.通过循环取出每张图片，放到指定地方

3.每次循环的时候重新new FileReader()对象

2. FileReader()对象

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

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

属性:

error: 读取文件时发生的错误；

readyState: 表明FileReader对象的当前状态；

result: 读取到的文件内容，只在读取操作完成后才有效，数据格式取决于采用的读取操作；

方法:

abort()： 中止该读取操作。

readAsText(file, encoding)：以纯文本的形式读取，result中的数据为字符串。

readAsDataURL(file)：result属性中将包含一个data:url格式的字符串。

readAsArrayBuffer(file): result属性中将包含一个ArrayBuffer对象。

readAsBinaryString(file)：读取文件的二进制源码。

事件处理程序

onabort: 当读取操作被中止时调用

onerror：当读取操作发生错误时调用

onload: 当读取操作成功完成时调用

onloadend: 当读取操作完成时(不管成功还是失败)，在onload或者onerror之后调用

onloadstart: 当读取操作将要开始时调用

onprogress: 在读取数据过程中周期性调用

3.示例

read