河南中医药大学：《Web前端开发》课程理论教学课件（2017）20.文件

文件API 管理科学与工程学科 耿方方

文件 API 管理科学与工程学科 耿方方

主要内容 文件存储 处理用户文件 文件操作 文件内容操作 文件API 案例:用户本地资源管理

主要内容  文件存储  处理用户文件  文件操作  文件内容操作  文件API  案例：用户本地资源管理

文件存储 文件是用户可以方便地与他人分享的信息单位。用户不能分享变量 的值,但肯定能创建文件的副本,并用DⅦD、移动存储器或硬盘,或 者 Internet等机制发送文件。文件可以存储大量数据,可以移动、 复制、传输,与内容的性质无关。 对于每个应用程序来说,文件总是不可缺少的一部分,但迄今为止 在HM5出现以前,Web上还没有良好的处理文件的机制。 使用文件APL,Web应用可以创建、读取、操作用户本地文件系统中的 沙盒部分以及向其中写入数据

文件存储  文件是用户可以方便地与他人分享的信息单位。用户不能分享变量 的值，但肯定能创建文件的副本，并用DVD、移动存储器或硬盘，或 者Internet等机制发送文件。文件可以存储大量数据，可以移动、 复制、传输，与内容的性质无关。  对于每个应用程序来说，文件总是不可缺少的一部分，但迄今为止， 在HTML5出现以前,Web上还没有良好的处理文件的机制。  使用文件API,Web应用可以创建、读取、操作用户本地文件系统中的 沙盒部分以及向其中写入数据。 

文件存储 ■HML5规范从一开始就考虑到了Web应用程序构建和操作性的每个方 面。从设计到基本的数据结构,每件事都考慮到了,文件也不可能 遗漏在外。因此,班M5规范将文件API整合进来。 文件API拥有底层基础设施,可以同步工作,也可以异步工作。之所 以开发同步部分,是为了在 Web Workers api上工作,这一点与其他 AP类似,而异步部分针对的是普通Web应用程序。这些特征意味着 必须注意处理过程中的每个方面,检测处理成功还是失败,日后在 此之上可能会采用更简单的API

文件存储  HTML5规范从一开始就考虑到了Web应用程序构建和操作性的每个方 面。从设计到基本的数据结构，每件事都考虑到了，文件也不可能 遗漏在外。因此，HTML5规范将文件API整合进来。  文件API拥有底层基础设施，可以同步工作，也可以异步工作。之所 以开发同步部分，是为了在Web Workers API上工作，这一点与其他 API类似，而异步部分针对的是普通Web应用程序。这些特征意味着 必须注意处理过程中的每个方面，检测处理成功还是失败，日后在 此之上可能会采用更简单的API。 

文件AP的应用 1、可以预览本地图片 2、断点续传 上传时,先把目标文件复制到本地沙箱,然后分解逐块上传 浏览器崩溃或者网络中断也没关系,因为恢复后可以续传 3、离线视频播放器 4、离线邮件

文件API的应用  1、可以预览本地图片  2、断点续传  上传时，先把目标文件复制到本地沙箱，然后分解逐块上传  浏览器崩溃或者网络中断也没关系，因为恢复后可以续传  3、离线视频播放器  4、离线邮件

文件AP的存储路径 1、 Windows的存储路径为:C:Ⅷ Users\用户名 \AppData\ Local\ Google\ Chrome\User Data\Default\ File System ; ■Mac的存储路径为:~/ Library/Ap pplication Support/Google/ Chrome/Default/File System/o 2、访问方式 filesystem:htt; domain/temporary/文件名

文件API的存储路径  1 、 Windows 的 存 储 路 径 为 ： C:\Users\ 用 户 名 \AppData\Local\Google\Chrome\User Data\Default\File System；  Mac 的 存 储 路 径 为 ： ~/Library/Application Support/Google/Chrome/Default/File System/。  2、访问方式：  “filesystem:http://domain/temporary/文件名

文件存储 文件API不是新API,而是经过改良和扩展的旧API,其至少包含以下 三个规范 读取和处理文件:File/Blob、 Filelist、 FileReader 目录和文件系统访问 DirectoryReader FileEntry/DirectoryEntry, LocalFileSystem 创建和写入: BlobBuilder、 FileWriter

文件存储  文件API不是新API，而是经过改良和扩展的旧API，其至少包含以下 三个规范：  读取和处理文件：File/Blob、FileList、FileReader  目 录 和 文 件 系 统 访 问 ： DirectoryReader 、 FileEntry/DirectoryEntry、LocalFileSystem  创建和写入：BlobBuilder、FileWriter

文件存储 目前浏览器的支持情况如表17-01所示。 表1701文件AP的览器支持情兄 Chrome Firefox Opera File APl 13+ FileReader API 6 4 12+ 10+ Filesystem&FileWriter API 13+ BlobBuilder APl 17+

文件存储  目前浏览器的支持情况如表17-01所示

处理用户文件 读取文件 要从用户的计算机上读取用户的文件,必须使用 FileReader接口。 FileReader拥有4个方法,其中3个用以读取文件,另一个用来中断 读取,如表17-02中列出了这些方法以及参数。需要注意的是,无论 读取成功或失败,方法并不会返回读取结果,这一结果存储在 result属性中。 表17-02 File Reader对象方法 方法名 abort readAsArray Buffer readAsDataURL blob readAsText blob, encoding

处理用户文件 读取文件  要从用户的计算机上读取用户的文件，必须使用FileReader接口。 FileReader拥有4个方法，其中3个用以读取文件，另一个用来中断 读取，如表17-02中列出了这些方法以及参数。需要注意的是，无论 读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中

处理用户文件 读取文件 案例1: function process(e)i var files=e target. files var file=files [o] var reader-new FileReader o reader readS Text (file) reader.on⊥oad=shoW; function show(e)( var result=e. target. result databox, innerhTML=result

处理用户文件 读取文件  案例1：  function process(e){  var files=e.target.files;  var file=files[0];  var reader=new FileReader();  reader.readAsText(file);  reader.onload=show;   }  function show(e){  var result=e.target.result;  databox.innerHTML=result;  }