Web 交互开发 实验教学指导 实验六 : 文件 一 实验目的 (5 分 ) 1 掌握文件处理对象的相关操作; 2 了解文件打印的方法; 3 掌握 FileSystem API 的基本概念以及相关属性 方法与事件 ; 4 掌握 FileReader API 读取文件的内容的方法 ; 二 实验环境 (5 分 ) 1 Windows XP/Windows 7 操作系统的计算机 ; 2 局域网网络环境, 并且使用固定 IP 地址 三 实验要求 (5 分 ) 1 实现磁盘空间及文件大小的检测; 2 使用 FileReader 读取文件 ; 3 创建文件; 4 本地资源管理器的使用; 四 实验原理 (5 分 ) 1 文件对象处理的方法; 2 文件打印的方法; 3 文件 API 操作原理 ; 五 实验步骤 (40 分 ) 1 获取磁盘空间及文件大小 (1) 使用文件处理对象显示磁盘空间以及文件的大小, 如图 6-1 所示 图 6-1 磁盘空间及文件大小 (2) 部分代码如下 : function DriveSize(Drivename){ var fso=new ActiveXObject("Scripting.FileSystemObject"); var s=fso.getdrive(drivename.value); if (s.isready){ var str,str1,allsize=0.0; str=" 当前驱动器的名称为 :"+s.driveletter+"\n"; 本讲共计 6 页 当前第 1 页
AllSize=s.TotalSize/1024/1024/1024; str=str+" 当前驱动器的大小为 :"+parseint(allsize*10)/10+"\n"; AllSize=s.FreeSpace/1024/1024/1024; str=str+" 当前驱动器的可用空间为 :"+parseint(allsize*10)/10; alert(str); else alert(" 该驱动器无效 ") (3) 请完成以下任务 : 任务一 : 测试上述代码的兼容性, 包括 IE 谷歌和火狐, 说明情况 (3 分 ) 任务二 : 代码 var fso=new ActiveXObject("Scripting.FileSystemObject") 是什么意思 (2 分 ) 任务三 : 编写程序, 使得单击 文件大小 按钮, 能够检测出文本框中录入的文件名的文件的大小 类型以及名称 (7 分 ) 任务四 : 使用什么方法可以实现页面打印 (3 分 ) 请将上述任务的操作方法, 填写到实验报告册中 2 使用 FileReader 读取文件 (1) 读取文件如图 6-2 所示 图 6-2 读取文件 (2) 部分如下所示 : <head> <meta charset="utf-8"> <title>filereader 方法示例 </title> <script> var result=document.getelementbyid("result"); var file=document.getelementbyid("file"); function readasdataurl() { var file=document.getelementbyid("file").files[0]; if(!/image\/\w+/.test(file.type)) { alert(" 请确保文件类型为图像类型 "); return false; var reader=new FileReader(); reader.readasdataurl(file); reader.onload=function(e){ var result=document.getelementbyid("result"); 本讲共计 6 页 当前第 2 页
result.innerhtml='<img src="'+this.result+'" alt="">' </script> </head> <body> <p> <label> 请选择一个文件 :</label> <input type="file" id="file"> <input type="button" value=" 读取图像 " onclick="readasdataurl()"> <input type="button" value=" 读取文本文件 " onclick="readastext()"> </p> <div name="result" id="result"> </div> </body> (3) 请完成下面的任务 : 任务一 : 编写读取 txt 文件的代码 ( 7 分 ) 任务二 :FileReader 对象的方法有哪些?(3 分 ) 请将上述任务的操作方法, 填写到实验报告册中 3 创建文件 (1) 文件创建界面如下 图 6-3 创建文件 (2) 部分代码如下所示 : <html> <head> <title> 创建文件 </title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="text/javascript"> function initiate(){ 本讲共计 6 页 当前第 3 页
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!=''){ hd.getfile(name, {create:true, exclusive:false, show, showerror); function show(entry){ databox.innerhtml=' 文件创建成功!<br>'; databox.innerhtml+=' 名称 :'+entry.name+'<br>'; databox.innerhtml+=' 路径 :'+entry.fullpath+'<br>'; databox.innerhtml+='filesystem:'+entry.filesystem.name+'<br>'; function showerror(e){ alert(' 错误 :'+e.name); window.addeventlistener('load',initiate,false); </script> </head> <body> <div id="formbox"> <form name="form"> <p> 文件 :<br><input type="text" name="myentry" id="myentry"></p> <p><input type="button" name="fbutton" id="fbutton" value=" 提交 "></p> </form> </div> <div id="databox"> 没有可用的对象 </div> </body> </html> (2) 请完成下面的任务 : 本讲共计 6 页 当前第 4 页
任务一 :getfile() 方法的作用是什么? 所带参数分别是什么意思?(3 分 ) 任务二 : 上述代码中申请的空间是多少?(2 分 ) 任务三 : 创建目录所用的方法是什么?(3 分 ) 任务四 : 参考上述代码, 编写创建目录的代码 ( 7 分 ) 请将上述任务的操作方法, 填写到实验报告册中 六 自主实验步骤 (20 分 ) 1 用户本地资源管理器 (1) 页面如图 6-4 所示 (2) 完成下述任务 任务一 : 描述资源管理器的功能 (5 分 ) 任务二 :RequestFileSystem() 方法的作用? 该方法所带的参数表示什么意思?(5 分 ) 任务三 : 写入文件内容所用到的对象和方法是什么 (5 分 ) 任务四 : 找到读取目录的程序, 并加以注释 (5 分 ) 请将完成上述任务的步骤, 填写到实验报告册中 图 6-4 本地资源管理器 七 思考及问答 (20 分 ) 1 文件 API 的作用是什么?(5 分 ) 2 File 对象带有的属性有哪些?(5 分 ) 3 什么是 Base64 编码?(5 分 ) 本讲共计 6 页 当前第 5 页
4 Blob 对象的 slice() 方法的作用是什么?(5 分 ) 本讲共计 6 页 当前第 6 页