欢迎来到天天文库
浏览记录
ID:52794051
大小:743.87 KB
页数:11页
时间:2020-03-30
《《Ajax与PHP基础教程》第六章(完).pdf》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库。
1、第6章图像6当浏览某个网站时速率很低,等待图像载入的漫长过程令你非常恼火。基于文本的网站在任何因特网连接中都能够马上显示(或是看上去),而图像必须下载才能够查看。随着宽带网的出现,渐渐地这些都不再是问题,但图像显示仍然需要时间。图像的载入和查看是必需的,因此开发人员的一个主要任务就是使图像的载入越来越快。幸运的是,有了诸如Ajax的概念和PHP之类的脚本语言,就拥有一个处理图像的强大工具集。通过Ajax可以动态地载入和显示图像,不必重载页面的其他部分,从而提高了处理速度,同时也能够对用户在屏幕或图像载入时能够看到的内容进行更多的控制。只要让用户知道正在发生什么,通常也能够忍受载入
2、所需的时间。通过Ajax和一些PHP技巧,就能够让用户体验尽可能的流畅和愉快。本章将介绍使用PHP和Ajax实现图像上传、维护和动态显示的方法。6.1 图像上传这里有必要指出一个对于Ajax而言的坏消息,文件上传的处理是无法通过XMLHttpRequest对象实现的。其原因是JavaScript无法访问计算机中的文件。虽然这稍稍有点让人失望,但仍然有办法来执行类似Ajax的功能,而无需使用XMLHttpRequest对象。聪明的开发人员会发现可以使用隐藏iframe来提供表单请求,因此这样实现文件上传也无需对整个页面进行刷新(尽管可能会看到屏幕有些闪动)。只要把iframe的CS
3、S属性display设置成none,该元素就能够在上传表单中使用,但对于最终用户却是不可见的。通过为iframe标签赋予一个name属性,就可以使用form标签中的target属性来将请求传送给这个隐藏iframe。当配置完这个iframe后,就能够完成任何所需的上传操作,然后再使用Ajax来执行其他的功能。看看下面的例子,它能够将一个图像上传到指定的目录中。其代码如代码清单61所示,它可以创建出如图61所示的应用程序。图61 使用了Ajax的文件上传系统,它将通过隐藏iframe来隐藏上传元素6.1 图像上传71 代码清单61用于创建一个包含隐藏iframe的表单的代码(sam
4、ple6_1.hmtl)
5、" />
6、ltipart/formdata" target="uploadframe"➥onsubmit="uploadimg(this); return false"> Upload a File:
7、y> 代码清单61创建了应用程序的基础和用户界面。在此包括表单(带有file元素)以及负责传送请求的iframe。注意在该HTML文档的head标签中有一个noshow类,这是用来隐藏iframe的。为了完成实际的上传操作,需要使用一些实现Ajax的JavaScript代码。该JavaScript将执行functions.js文件中名为uploadimg函数所实现的上传操作。在提交按钮被单击时将调用该函数。//functions.jsfunction uploadi
此文档下载收益归作者所有