河南中医药大学：《Web交互开发》实验指导_08.实验八：文件[JH-2018版]

《Web交互开发》实验教学指导/实验八:文件 《Web交互开发》实验教学指导 实验八:文件 、实验目的(5分) 1、掌握 FileReader Api读取文件的方法; 2、掌握文件和目录的操作方法 3、掌握文件系统的使用; 二、实验环境(5分) 1、 Windows XP/Windows7操作系统的计算机; 2、局域网网络环境,并且使用固定IP地址。 三、实验要求(5分) 1、使用 FileReader读取文件 2、分割图像 3、使用 jQuery加载js文件 4、实现天气预报代码。 四、实验原理(5分) l、 File Reader apl; 2、文件和目录的操作 3、文件系统的使用 五、实验步骤(40分) 1、使用 FileReader读取文件 (1)读取文件如图8-1所示。 请选择一个文件:[选择文件未选择任何文件 「读取图像读取文本文件 图8-1读取文件 (2)请完成下面的任务: 任务一:完成图像文件的读取操作?(10分) 任务二:完成中文文本的读取操作?(10分) 要求 请将上述任务的操作方法,填写到实验报告册中。 2、分割文件 (1)上传文件,显示文件的前1000字节 (2)请完成下面的任务 本讲共计3页|当前第1页

《Web 交互开发》实验教学指导 / 实验八 ：文件 本讲共计 3 页 | 当前第 1 页 《Web 交互开发》实验教学指导 实验八：文件 一、实验目的（5 分） 1、掌握 FileReader API 读取文件的方法； 2、掌握文件和目录的操作方法； 3、掌握文件系统的使用； 二、实验环境（5 分） 1、Windows XP/Windows 7 操作系统的计算机； 2、局域网网络环境，并且使用固定 IP 地址。 三、实验要求（5 分） 1、使用 FileReader 读取文件； 2、分割图像； 3、使用 jQuery 加载 js 文件； 4、实现天气预报代码。 四、实验原理（5 分） 1、FileReader API； 2、文件和目录的操作； 3、文件系统的使用。 五、实验步骤（40 分） 1、使用 FileReader 读取文件 （1）读取文件如图 8-1 所示。 （2）请完成下面的任务： 任务一：完成图像文件的读取操作？（10 分） 任务二：完成中文文本的读取操作？（10 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 2、分割文件 （1）上传文件，显示文件的前 1000 字节。 （2）请完成下面的任务： 图 8-1 读取文件

《Web交互开发》实验教学指导/实验八:文件 任务一:编写代码,实现如图8-2所示效果。(10分) 文件名: Hydrangeas.jpg 文件: 类型: image/jpeg 选择文件 Hydrangeas. jpg 大小:595284 bytes B1ob大小:1349 bytes blob A+=,1AAA/0;/AAA0c1-71 图8-2截取文件 要求 请将上述任务的操作方法,填写到实验报告册中 3、创建文件系统 (1)创建文件系统 (2)请完成下面的任务 任务一:创建文件系统,如图8-3所示。(10分) 目录创建成功! 名称:a 路径:/aa Filesystem:http_web.book51xueweb.cn0:Temporary 图8-3文件系统 要求 请将上述任务的操作方法,填写到实验报告册中。 六、自主实验步骤(20分) 用户本地资源管理器 (1)页面如图8-4所示 (2)完成下述任务。 任务一:描述资源管理器的功能。(5分) 任务二: Request Filesystem方法的作用?该方法所带的参数表示什么意思?(5分) 任务三:写入文件内容所用到的对象和方法是什么。(5分) 任务四:找到读取目录的程序,并加以注释。(5分) 要求 请将完成上述任务的步骤,填写到实验报告册中 本讲共计3页|当前第2页

《Web 交互开发》实验教学指导 / 实验八 ：文件 本讲共计 3 页 | 当前第 2 页 任务一：编写代码，实现如图 8-2 所示效果。（10 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 3、创建文件系统 （1）创建文件系统； （2）请完成下面的任务： 任务一：创建文件系统，如图 8-3 所示。（10 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 六、自主实验步骤（20 分） 1、用户本地资源管理器。 （1）页面如图 8-4 所示。 （2）完成下述任务。 任务一：描述资源管理器的功能。（5 分） 任务二：RequestFileSystem()方法的作用？该方法所带的参数表示什么意思？（5 分） 任务三：写入文件内容所用到的对象和方法是什么。（5 分） 任务四：找到读取目录的程序，并加以注释。（5 分） 要求： 请将完成上述任务的步骤，填写到实验报告册中。 图 8-2 截取文件 图 8-3 文件系统

《Web交互开发》实验教学指导/实验八:文件 资源空间总大小50MB 资源列表 添加目录新建文件」 名称 操作 查看修改删除 /web 查看修改删除 查看修改删除 查看修改删除 返回上一级 图8-4本地资源管理器 七、思考及问答(20分) 1、文件API的作用是什么?(5分) 2、 FileReader对象的方法有哪些?(5分) 3、什么是Base64编码?(5分) 4、Blob对象的 slice方法的作用是什么?(5分) 本讲共计3页|当前第3页

《Web 交互开发》实验教学指导 / 实验八 ：文件 本讲共计 3 页 | 当前第 3 页 七、思考及问答（20 分） 1、文件 API 的作用是什么？（5 分） 2、FileReader 对象的方法有哪些？（5 分） 3、什么是 Base64 编码？（5 分） 4、Blob 对象的 slice()方法的作用是什么？（5 分） 图 8-4 本地资源管理器