文件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; }