《Web交互开发》实验教学指导/实验六:文件 《Web交互开发》实验教学指导 实验六:文件 、实验目的(5分) 1、掌握文件处理对象的相关操作; 2、了解文件打印的方法 3、掌握 FileSystem API的基本概念以及相关属性、方法与事件; 4、掌握 FileReader APl读取文件的内容的方法; 二、实验环境(5分) 1、 Windows XP/ Windows7操作系统的计算机 2、局域网网络环境,并且使用固定IP地址。 三、实验要求(5分) 1、实现磁盘空间及文件大小的检测 2、使用 FileReader读取文件 3、创建文件 4、本地资源管理器的使用 四、实验原理(5分) 1、文件对象处理的方法 2、文件打印的方法 3、文件API操作原理 五、实验步骤(40分) 1、获取磁盘空间及文件大小 (1)使用文件处理对象显示磁盘空间以及文件的大小,如图6-1所示。 盘符 「磁盘空间 文件大小: 文件大 图6-1磁盘空间及文件大小 (2)部分代码如下: on Drive Size(Drivename) ar fso=new ActiveXObject("Scripting. FileSystemObject") ar s=fso. GetDrive(Drivename value) if(s IsReady) str="当前驱动器的名称为"+ s Driveletter"n" 本讲共计6页当前第1页
《Web 交互开发》实验教学指导 / 实验六 ：文件 本讲共计 6 页 | 当前第 1 页 《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 所示。 （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 磁盘空间及文件大小
《Web交互开发》实验教学指导/实验六:文件 AllSize=s TotalSize/1024/1024/1024 str=str+"当前驱动器的大小为"+ parselnt(AllSize*10)/10+"mn"; AllSize=s FreeSpace/1024/1024/1024 str=str+"当前驱动器的可用空间为"+ parselnt(AllSize*10)10 alert(str) else alert("该驱动器无效。") (3)请完成以下任务 任务一:测试上述代码的兼容性,包括正E、谷歌和火狐,说明情况。(3分) 任务二:代码 var fso= new ActiveXObject" Scripting. File SystemObject)是什么意思(2分) 任务三:编写程序,使得单击“文件大小”按钮,能够检测出文本框中录入的文件名的文件的 大小、类型以及名称。(7分) 任务四:使用什么方法可以实现页面打印。(3分) 要求 请将上述任务的操作方法,填写到实验报告册中。 2、使用 FileReader读取文件 (1)读取文件如图6-2所示。 请选择一个文件:选择文件未选择任何文件 读取图像读取文本文件 图6-2读取文件 (2)部分如下所示 title>file Reader方法示例< title var resultdocument get Element Byld("result"); var file=document. getElement Byld("file"); function readAsDataURLO i var file=document getElement Byld("file" ).files(o] if( !/imageWw+/ test(file type)) alert("请确保文件类型为图像类型") eturn false var reader-new FileReadero reader. readAsDataURL(file) reader. onload=function(e)i var result=document. getElement Byld("result") 本讲共计6页当前第2页
《Web 交互开发》实验教学指导 / 实验六 ：文件 本讲共计 6 页 | 当前第 2 页 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 所示。 （2）部分如下所示： fileReader 方法示例 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 读取文件
《Web交互开发》实验教学指导/实验六:文件 result. innerHTML=请选择一个文件: liv name="result"id="result"> ybody> (3)请完成下面的任务: 任务一:编写读取tt文件的代码。(7分) 任务二: FileReader对象的方法有哪些?(3分) 要求 请将上述任务的操作方法,填写到实验报告册中。 3、创建文件 (1)文件创建界面如下 没有可用的对象 图6-3创建文件 (2)部分代码如下所示 function initiate 本讲共计6页|当前第3页
《Web 交互开发》实验教学指导 / 实验六 ：文件 本讲共计 6 页 | 当前第 3 页 result.innerHTML='' } } } 请选择一个文件： （3）请完成下面的任务： 任务一：编写读取 txt 文件的代码。（7 分） 任务二：FileReader 对象的方法有哪些？（3 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 3、创建文件 （1）文件创建界面如下。 （2）部分代码如下所示： 创建文件 function initiate(){ 图 6-3 创建文件
《Web交互开发》实验教学指导/实验六:文件 4 databox=document. getElement Byldd'databox): var button=document. getElement Byld(ibutton) window. webkit Request FileSystem( window. TEMPORARY, 5 1024*1024, created, showerror) button. add EventListener(click, create, false); function created(fs)i hd=fs . root function createD var name=document. getElementByld'myentry')value if(name!=)Y hd. getFile(name, create true, exclusive false), show, showerror) function show(entry)1 databox innerhTML=文件创建成功! databox innerhTML+=路径:+ entry. fullPath+ function showerror(e)( alert(错误:'+ e name) window. add Event Listener('load, initiate, false) diy id=formbox"> X1+ 没有可用的对象 (2)请完成下面的任务: 本讲共计6页|当前第4页
《Web 交互开发》实验教学指导 / 实验六 ：文件 本讲共计 6 页 | 当前第 4 页 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='文件创建成功！'; databox.innerHTML+='名称：'+entry.name+''; databox.innerHTML+='路径：'+entry.fullPath+''; databox.innerHTML+='FileSystem：'+entry.filesystem.name+''; } function showerror(e){ alert('错误：'+e.name); } window.addEventListener('load',initiate,false); 文件: 没有可用的对象 （2）请完成下面的任务：
Wdb交互开发》实验教学指导/实验六:文件5 任务一: getFileo方法的作用是什么?所带参数分别是什么意思?(3分) 任务二:上述代码中申请的空间是多少?(2分) 任务三:创建目录所用的方法是什么?(3分) 任务四:参考上述代码,编写创建目录的代码。(7分) 要求 请将上述任务的操作方法,填写到实验报告册中。 六、自主实验步骤(20分) 用户本地资源管理器。 (1)页面如图64所示 (2)完成下述任务 任务一:描述资源管理器的功能。(5分) 任务二: RequestFileSystemO方法的作用?该方法所带的参数表示什么意思?(5分) 任务三:写入文件内容所用到的对象和方法是什么。(5分) 任务四:找到读取目录的程序,并加以注释。(5分) 要求 请将完成上述任务的步骤,填写到实验报告册中 资源空间总大小50MB 资源列表 加日寻建件 名称 操作 查看修改删除 /web 删除 查看修改删除 查看修改删除 查看修改删除 「谈回十一级 图6-4本地资源管理器 七、思考及问答(20分) 1、文件API的作用是什么?(5分) 2、Fle对象带有的属性有哪些?(5分) 3、什么是Base64编码?(5分) 本讲共计6页|当前第5页
《Web 交互开发》实验教学指导 / 实验六 ：文件 本讲共计 6 页 | 当前第 5 页 任务一：getFile()方法的作用是什么？所带参数分别是什么意思？（3 分） 任务二：上述代码中申请的空间是多少？（2 分） 任务三：创建目录所用的方法是什么？（3 分） 任务四：参考上述代码，编写创建目录的代码。（7 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 六、自主实验步骤（20 分） 1、用户本地资源管理器。 （1）页面如图 6-4 所示。 （2）完成下述任务。 任务一：描述资源管理器的功能。（5 分） 任务二：RequestFileSystem()方法的作用？该方法所带的参数表示什么意思？（5 分） 任务三：写入文件内容所用到的对象和方法是什么。（5 分） 任务四：找到读取目录的程序，并加以注释。（5 分） 要求： 请将完成上述任务的步骤，填写到实验报告册中。 七、思考及问答（20 分） 1、文件 API 的作用是什么？（5 分） 2、File 对象带有的属性有哪些？（5 分） 3、什么是 Base64 编码？（5 分） 图 6-4 本地资源管理器
《Web交互开发》实验教学指导/实验六:文件 6 4、Blob对象的 slice方法的作用是什么?(5分) 本讲共计6页|当前第6页
《Web 交互开发》实验教学指导 / 实验六 ：文件 本讲共计 6 页 | 当前第 6 页 4、Blob 对象的 slice()方法的作用是什么？（5 分）