PowerPoint 演示文稿

Size: px

Start display at page:

Download "PowerPoint 演示文稿"

敢麓吴
5 years ago
Views:

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

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

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

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

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

6 文件 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: 文件名

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

8 文件存储目前浏览器的支持情况如表所示

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

10 处理用户文件读取文件案例 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; }

11 处理用户文件读取文件属性在实际应用程序中, 文件名文件大小及文件类型等信息都是必需的, 这些信息可以让用户了解所处理文件的情况, 甚至可以控制用户的输入 <input> 标签发送的文件对象提供了可以用来获得文件信息的多个属性, 具体属性如下所示 name: 该属性返回文件的全名 ( 文件名和扩展名 ) size: 该属性返回文件的大小, 以字节为单位 type: 该属性返回文件的类型, 以 MIME 类型表示

12 处理用户文件读取文件属性案例 2: function initiate(){ databox=document.getelementbyid('databox'); var myfiles=document.getelementbyid('myfiles'); myfiles.addeventlistener('change',process,false); } function process(e){ var files=e.target.files; databox.innerhtml=''; var file=files[0]; if(!file.type.match(/image.*/i)){ alert(' 请插入一个图片 '); } else{ databox.innerhtml+=' 文件名 :'+file.name+'<br>'; databox.innerhtml+=' 大小 :'+file.size+' bytes<br>'; var reader=new FileReader(); reader.onload=show; reader.readasdataurl(file); }

13 处理用户文件文件分割除了文件外,API 还能处理另一个源类型, 即 blob blob 是代表原始数据的对象创建 blob 对象的目的是为了克服 JavaScript 在处理二进制数据上的限制 blob 通常是由文件生成的, 但并不是必需的, 不将整个文件加载到内存就能处理数据是个很好的做法, 这种做法为一小片一小片地处理二进制信息提供了可能性 Blob 有多个作用, 但主要是为了提供更好的方法处理原始数据或大型文件的小片段要用以前的 blob 或文件生成 blob,api 提供了 slice() 方法 Slice(start,length,type): 该方法返回一个 blob 或文件生成新的 blob 第一个属性代表起点, 第二属性指定新的 blob 长度, 最后一个属性是一个可选参数, 指定数据的类型

14 处理用户文件文件分割案例 3: function process(e){ var files=e.target.files; databox.innerhtml=''; var file=files[0]; var reader=new FileReader(); reader.onload=function(e){ show(e, file);}; var blob=file.slice(0,1000); reader.readasdataurl(blob); }

15 处理用户文件处理事件将文件加载进内存需要的时间长短取决于文件的大小对小文件来说, 加载过程仿佛一蹴而就 ; 但大文件可能需要几分钟才能加载完成除了前边已经提过的 load 事件,API 还提供了几个特殊事件, 用来告知处理过程的每个情况表中归纳了 FileReader 的事件模型

16 处理用户文件处理事件案例 4: function process(e){ var files=e.target.files; databox.innerhtml=''; var file=files[0]; var reader=new FileReader(); reader.onloadstart=start; reader.onprogress=status; reader.onloadend=function(){ show(file);}; reader.readasarraybuffer(file); } function start(e){ databox.innerhtml='<progress value="0" max="100">0%</progress>'; } function status(e){ var per=parseint(e.loaded/e.total*100); databox.innerhtml='<progress value="'+per+'" max="100">'+per+'%</progress>'; }

17 文件操作本地磁盘操作应用程序保留的空间就像一个沙盒, 是一块有根目录和配置的小硬盘, 要使用这个硬盘, 必须请求为应用程序初始化一个 FileSystem 文件 API: 目录和系统包含了两个不同的版本, 分别为异步 API 和同步 API 异步 API: 对于一般的应用来说非常有用, 可以防止阻塞同步 API: 特别为 Web Workers 设计

18 文件操作本地磁盘操作考虑到安全性,API 接口设计时做了一些限制, 具体如下所述存储配额限制 (quota limitations) 同源限制, 如只能读写同域内的 cookie 和 localstorage 文件类型限制, 限制可执行文件的创建或者重命名为可执行文件首先需要通过请求一个 LocalFileSystem 对象来得到 HTML 5 文件系统的访问, 使用 window.requetfilesystem 全局方法的具体代码如下所示 window.requestfilesystem(type, size, successcallback, opt_errorcallback)

19 文件操作本地磁盘操作在使用 window.requetfilesystem 时需要注意以下几个方面的事项 Google Chrome 和 Opera 是目前仅有的实现了这部分 API 的浏览器因为该实现还属于实验性质, 所以必须用特定方法 webkitrequestfilesystem() 替代 requestfilesystem() 方法换用这个方法后, 才能在浏览器里测试上面的代码及后面的示例, 且参数 type 只能选用 TEMPORARY, 否则会显示 QUOTA_EXCEEDED_ERROR 错误需要将 HTML 文件发布至一个 Web 站点下, 通过浏览器访问以查看效果

20 文件操作本地磁盘操作要在本地通过 file://... 方式运行以下示例, 则建议使用 Chrome 浏览器, 且必须使用以下标签打开 Chrome:--allowfile-access-from-files 要在 Windows 上给 Chrome 加上这个标签, 请在桌面的 Chrome 图标上单击鼠标右键, 选择属性选项在打开的窗口中, 可以看到目标域, 里面是 Chrome 执行文件的路径和文件名, 并添加相应标签, 完成之后为 : C\Users\...\Chrome\Application\chrome.exe --allowfile-access-from-files, 此方法建议用于开发测试的环境

文件操作本地磁盘操作表 17-04 列出了 requestfilesystem 的方法 Type: 包含两种类型,

21 文件操作本地磁盘操作表列出了 requestfilesystem 的方法 Type: 包含两种类型, 一个是持久性的文件系统, 适合长期保存用户数据一个临时性的文件系统, 适合进行数据缓存 Size: 指定字节大小, 指定有效地最大访问存储大小

22 文件操作本地磁盘操作案例 5: function initiate(){ databox=document.getelementbyid('databox'); var button=document.getelementbyid('fbutton'); window.webkitrequestfilesystem(window.temporary, 5*1024*1024, createhd, showerror); button.addeventlistener('click',create,false); } function createhd(fs){ hd=fs.root; } function create(){ var name=document.getelementbyid('myentry').value; if(name!=''){ showerror); hd.getfile(name, {create:true, exclusive:false}, show, } }

文件操作创建文件 getfile() 方法是 API 的 DirectoryEntry 接口的一部分这个接口共提供了 4 种方法用来创建和处理文件及目录, 具体如表 17-05 所示 getfile: 该方法的作用为创建或打开文件 Path

23 文件操作创建文件 getfile() 方法是 API 的 DirectoryEntry 接口的一部分这个接口共提供了 4 种方法用来创建和处理文件及目录, 具体如表所示 getfile: 该方法的作用为创建或打开文件 Path 参数必须包含文件的名称以及文件所在的路径的名称 Option 选项使用两个标签 : create 和 exclusive Create 指定是否创建文件 ;exclusive 标签为 true 时, 如果新建一个已经存在的文件,getFile() 方法返回错误同时该方法也接受两个回调函数, 分别针对成功和失败两种情况

24 文件操作创建目录 getfile() 方法 ( 针对文件 ) 和 getdirectory() 方法 ( 针对目录 ) 的用法完全相同只需要将 getfile() 换成 getdirectory() 即可, 具体代码如下所示

25 文件操作列出文件如前所述,createReader() 方法可以得到指定路径中的项 ( 文件和目录 ) 列表这个方法返回的 DirectoryReader 对象的 readentries() 方法可以读取指定目录中的项 DirectoryReader 对象的方法如表所示

26 文件操作列出文件案例 6: function readdir(dir){ var reader=dir.createreader(); var read=function(){ reader.readentries(function(files){ if(files.length){ list(files); read(); } },showerror); } read(); }

27 文件操作处理文件对于执行常规的文件和目录操作来说, 还有几个有用的方法使用这些方法可以移动复制或删除项, 就像桌面应用程序一样, 具体的对象方法如表所示

28 文件操作移动 moveto() 方法要求代表文件的 Entry 对象和代表文件移动到目标目录的另一个对象所以首先必须用 getfile() 创建文件引用, 然后用 getdirectory() 获得目标目录的引用, 最后在这些信息上应用 moveto() 方法

29 文件操作移动案例 7: function modify(){ var origin=document.getelementbyid('origin').value; var destination=document.getelementbyid('destination').value; hd.getfile(origin, null, function(file){ hd.getdirectory(destination, null, function(dir){ file.moveto(dir, null, success, showerror); },showerror); }, showerror); }

30 文件操作复制 moveto() 方法和 copyto() 方法唯一的区别就是后者保留原始文件要使用 copyto() 方法, 只需要修改示例代码中方法的名称 modify() 函数修改完后具体代码如下所示 :

31 文件操作删除删除文件或目录相对于移动或复制文件更为简单, 需要完成的操作就是获得将要删除的文档或目录的 Entry 对象, 然后在这个对象上应用 remove() 方法具体代码如下所示

32 文件操作删除如果要删除的是目录而不是文件, 则必须使用 getdirectory() 方法创建目录的 Entry 对象, 然后 remove() 方法的用法不变但对目录来说, 有一种情况必须考虑 : 如果目录不为空, 则 remove() 方法会返回错误如果要删除目录及其内容, 必须使用另一个方法 removerecursively() 具体代码如下所示

33 文件内容操作写入内容要向文件写入内容, 必须创建 FileWriter 对象该对象是由 FileEntry 接口的 createwriter() 方法返回的本接口是 Entry 接口的扩展, 提供了操作文件的两个方法,FileWriter 对象方法如表所示 createwriter 方法 : 返回与选中项关联的 FileWrite 对象 File 方法 : 用来读取文件内容它创建与选中项关联的 File 对象, 此方法与 <input> 元素或拖放操作返回的对象类似

34 文件内容操作写入内容 createwriter() 方法返回的 FileWriter 对象有自己的方法属性事件, 负责执行向文件添加内容的操作, 具体方法如表所示, 属性如表所示, 事件如表所示表 FileWriter 对象方法方法 write seek truncate 参数 data offset size write 方法 : 负责向文件写入数据数据内容由 data 属性以 blob 格式提供 seek 方法 : 设置添加内容的位置 offset 属性的值必须以字节声明 truncate 方法 : 根据 size 属性的值 ( 单位 : 字节 ) 修改文件的长度

35 文件内容操作写入内容 createwriter() 方法返回的 FileWriter 对象有自己的方法属性事件, 负责执行向文件添加内容的操作, 具体方法如表所示, 属性如表所示, 事件如表所示表 FileWriter 对象属性属性 position length 描述这个属性返回下一个写入位置新文件的写入位置是 0, 如果已经向文件写入一些内容, 或者调用过 seek() 方法, 则这个属性返回的值非 0 这个属性返回文件的长度

36 文件内容操作写入内容 createwriter() 方法返回的 FileWriter 对象有自己的方法属性事件, 负责执行向文件添加内容的操作, 具体方法如表所示, 属性如表所示, 事件如表所示表 FileWriter 对象事件事件 writestart progress write abort error writeend 描述当写入过程开始时触发这个事件这个事件在写入过程中定期触发来报告进度数据完全写入后触发这个事件当写入过程中止时触发这个事件当发生错误时触发这个事件当写入过程结束时触发这个事件

37 文件内容操作写入内容案例 8 function writefile(){ var name=document.getelementbyid('myentry').value; hd.getfile(name, {create:true, exclusive:false}, function(entry){ entry.createwriter(writecontent, showerror); },showerror); } function writecontent(filewriter){ var text=document.getelementbyid('mytext').value; filewriter.onwriteend=success; var blob=new Blob([text],{type:"text/plain; charset=utf-8"}); filewriter.write(blob); } function success(){ document.getelementbyid('myentry').value=''; document.getelementbyid('mytext').value=''; databox.innerhtml=' 完成 '; } window.addeventlistener('load',initiate,false);

38 文件内容操作追加内容因为没有指定在哪个位置插入内容, 所以前面的代码从文件开始写入 blob, 要选择在现有文件特定位置或末尾追加内容, 必须使用 seek() 方法以下代码函数改进了前面的 writecontent() 函数, 加入 seek() 方法将写入位置移动到文件末尾这样 write() 方法写入的内容就不会覆盖文件现有的内容

39 文件内容操作读取内容读取过程要使用 FileReader() 构造函数和 readastext() 等读取方法读取并获得文件的内容

40 文件内容操作读取内容案例 9

《linux从入门到精通》实验指导第三讲：文件及目录操作

《linux从入门到精通》实验指导第三讲：文件及目录操作 Web 交互开发实验教学指导实验六 : 文件一实验目的 (5 分 ) 1 掌握文件处理对象的相关操作; 2 了解文件打印的方法; 3 掌握 FileSystem API 的基本概念以及相关属性方法与事件 ; 4 掌握 FileReader API 读取文件的内容的方法 ; 二实验环境 (5 分 ) 1 Windows XP/Windows 7 操作系统的计算机 ; 2 局域网网络环境,