PHP网站开发项目式教程（微课版）（第2版）任务11 添加附件的复杂方法设计

PHP网站开发项目式教程（微课版）（第2版）任务11添加附件的复杂方法设计

添加附件的复杂方法是指在写邮件界面中，当用户单击“添加附件”后，在不显示文件域元素的情况下，直接完成附件的添加，并将已经添加的附件的名称和大小信息显示在写邮件界面中。用于添加附件的页面效果如图11-1所示。图11-1

用于添加附件的页面效果

单击图11-1中的“添加附件”可打开选择文件的界面，选择附件文件之后，系统直接将附件文件保存到服务器端指定的文件夹中，并在进行处理之后将附件的名称和大小等信息显示在写邮件界面中，效果如图11-2所示。

图11-2中显示的附件名称后面同时显示了附件的大小信息，单击右侧的“删除”，可以删除附件。图11-2

添加附件之后的界面效果任务11-1设计“添加附件”页面

需要解决的核心问题单击图11-1中的“添加附件”，会弹出选择文件的界面，“添加附件”文本元素需要以怎样的形式添加到写邮件界面中？当表单中没有“提交”按钮时，如何使用submit()方法在指定操作完成之后向服务器提交数据？

显示在页面中的“添加附件”实际上是一个独立的页面文件的内容，页面文件名称是up.php，该文件作为浮动框架子页面被嵌入writeemail.php文件。

文件up.php涉及两部分的内容：第一部分是设计选择附件界面；第二部分是附件文件的上传与处理。11.1.1选择附件界面的设计1．界面设计要求

为了方便控制文本元素“添加附件”和文件域元素的位置，需要将文件up.php的页面边距定义为0。

在文件up.php中需要有两个页面元素，分别是文件域元素和“添加附件”文本元素。

设计“添加附件”文本元素时，使用<span>…</span>标签进行定界，定义文本的样式为：字号为10pt，文本的行高为20px，文本颜色为蓝色，带下画线。

在up.php文件中插入表单，设计name和id是file1的文件域元素，使用ID选择符#file1定义文件域元素的样式，样式要求如下。（1）高度是20px，与“添加附件”文本元素的行高一致。（2）使用“滤镜”filter:alpha设置文件域元素的透明效果，在IE中要使用样式代码filter:alpha(opacity=0);进行设置，在其他浏览器中则要使用样式代码opacity:0;进行设置。为了保证在各种浏览器中都起作用，可同时定义这两种样式。（3）要实现文件域元素与“添加附件”文本元素的层叠显示效果，需要将文件域元素进行绝对定位，只有绝对定位的元素才能够放在其他元素的前面或后面。进行绝对定位之后，要保证定位在“添加附件”位置的正好是文件域元素中的“浏览”按钮，所以定位时，要将文件域元素中的文本框部分向左移动到浏览器窗口左边框外侧，保证“浏览”按钮的位置与“添加附件”的位置一致。使用绝对定位且横坐标为160px，纵坐标设置为0即可，将z-index设置为2，保证将文件域元素显示在“添加附件”的前面。（4）使用代码cursor:pointer;将鼠标指针设为手状。2．样式代码与页面元素代码（1）内嵌样式代码（2）页面元素代码11.1.2表单界面内容与数据处理功能的合并1．使用submit()方法提交表单数据

在up.php页面中实现当用户单击“添加附件”实现文件上传时，需要使用表单的submit()方法来提交数据。

当文件域元素的文本框内容发生变化时，系统会调用submit()方法。用户单击“添加附件”并选择文件之后，文件域元素的文本框中会显示文件的信息，这就意味着文本框的内容发生了变化，此时会触发文本框的change事件。因此只需要在文件域元素标签内部使用代码onchange="document.表单名称.submit();"即可完成数据的提交。

修改up.php文件代码，在<inputname="file1"type="file"id="file1"/>标签内部增加代码onchange="document.form1.

submit();"实现数据上传，此处的form1是表单<form>标签中name属性的取值。2．获取并处理上传的文件

在up.php文件中同时包含表单界面的设计代码和表单数据提交之后的处理功能代码，因此在数据提交之前要先判断数据是否已经提交，否则会出现代码错误。

使用isset()函数判断数据是否已经提交，即判断系统数组元素$_FILES['file1']是否已经设置，若已经设置，则说明数据已经提交，可执行数据处理部分的代码。任务11-2添加与删除附件功能的实现需要解决的核心问题用来上传附件的up.php文件应如何加载到写邮件页面中？写邮件页面中设计了几个接收上传附件信息的文本框？它们各自的作用是什么？在up.php页面中上传的附件信息怎样传送给写邮件页面中的文本框？如何在上传的附件信息前面增加附件图标，在其后面增加“删除”文本元素，之后显示在写邮件页面中？删除附件时，如何去掉写邮件页面中的带有附件图标和“删除”文本元素的附件信息？如何修改存放所有附件信息的文本框的内容？如何使用AJAX技术请求服务器删除upload文件夹中的相应文件？

添加附件，是指当用户单击“添加附件”后，系统将上传的文件信息显示在写邮件页面中，同时准备好要传递给服务器的保存在数据表emailmsg中的附件信息内容。

删除附件，是指当用户单击“删除”后，系统将对应的附件信息从写邮件页面中删除，同时修改在添加附件时准备好的要上传给服务器的保存在数据表emailmsg中的附件信息，还要请求服务器删除文件夹upload中的相应文件。11.2.1界面设计1．使用浮动框架嵌入上传附件页面

对于添加附件的页面文件up.php，需要使用浮动框架将其嵌入页面文件writeemail.php，在writeemail.php表格的“主题”和“内容”之间增加一行，在右侧单元格中插入浮动框架。浮动框架的设计要求如下。

宽度为100px，高度为30px，没有滚动条，边框为0，名称为upfile，初始状态加载的页面文件是up.php。2．设计接收上传附件的元素（1）在页面中增加接收附件名称和大小信息的文本框元素。

为了能够观察到效果，临时将两个文本框都设置为显示状态，添加3个附件后，两个文本框及附件信息的显示效果如图11-3所示。图11-3

两个文本框及附件信息的显示效果

在图11-3中，“主题”文本框下面的第一个文本框的id是attachmsg2，只显示最后添加的附件的名称和大小信息；第二个文本框的id是file，内部会按顺序显示3个附件的相关信息。

添加两个文本框，需要分别定义样式代码和页面元素代码。在样式文件writeemail.css中增加代码#attachmsg2,#file

{display:none;}。（2）为文本框传递数据。

修改up.php文件代码，在move_uploaded_file($ftmpname,

"upload/$name1");之后添加代码，将上传附件的名称和大小等信息传递到页面文件writeemail.php的两个文本框元素中。（3）用于显示附件信息的元素设计。

每上传一个附件之后，需要将writeemail.php页面中id="

attachmsg2"的文本框元素的内容获取出来，在其前面增加附件图标，在其后面增加“删除”文本元素之后，以图11-2中的效果显示在页面中。

因为附件图标和“删除”文本元素需要在所有附件中使用，所以在添加附件之前应先准备好这两个元素，这两个元素初始状态都是隐藏的，id分别为attachflag和delete。当用户单击“添加附件”时，分别复制这两个元素作为段落元素的子元素。

在writeemail.php页面的“添加附件”前后增加的元素一共有5个，临时将这5个元素都设置为显示状态，其中<divid="

attachment">因为初始高度为auto，且没有内容，所以不能显示，其余4个元素的效果如图11-4所示。图11-4

为处理附件准备的部分元素的效果11.2.2添加段落节点显示附件信息

显示在writeemail.php页面中的所有附件信息都需要使用段落标签来进行控制，之后将段落元素作为元素<divid="

attachment">的子元素添加到页面中，项目中会使用脚本函数appendattachment()实现这一功能。11.2.3删除附件

删除附件时需要实现两个功能，第一，删除图11-2中写邮件页面内显示的附件信息；第二，删除保存在upload文件夹中的附件文件。

删除写邮件页面中的附件信息，需要定义脚本函数完成；删除upload文件夹中的附件文件，需要使用AJAX完成浏览器与服务器的交互，最终实现服务器端文件的删除操作。

删除附件操作需要定义的脚本函数有两个：一是函数createXML()，用于创建对象XMLHttpRequest的实例；二是函数dele()，用于删除写邮件页面中的附件信息，删除id="file"的文本框中相应附件的“(随机数)文件名(大小);”格式的信息，通过AJAX向服务器端发出请求，提交要删除文件的“(随机数)文件名”格式的信息。

除了定义脚本函数，还需要定义一个PHP文件，用于接收文件名称并删除附件文件，项目中定义的文件是delefujian.php。1．创建函数createXML()2．创建函数dele()

对于所保留的分号的作用，下面举例说明。假设用户上传的附件有3个，效果如图11-5所示。图11-5

上传的3个附件的显示效果

在图11-5中，第1个附件微课录制.txt对应的“删除”文本元素name取值中的序号为1，第2个附件修改提示.txt对应的“删除”文本元素name取值中的序号为2，第3个附件PHP面向对象.docx对应的“删除”文本元素name取值中的序号为3。

删除附件修改提示.txt之后，图11-5的效果变为图11-6所示的效果。图11-6

删除一个附件之后的显示效果

在图11-6中，附件微课录制.txt对应的“删除”文本元素name取值中的序号为1，附件PHP面向对象.docx对应的“删除”文本元素name取值中的序号为3。3．创建服务器端文件delefujian．php任务11-3修改storeemail.php文件

在11.2节中使用的添加附件的方案中，所有附件的信息都以“(随机数)文件名(大小);”格式连接在一起放在id="file"的文本框中，发送邮件时，这些附件的信息会作为完整的数据提交给服务器。因此，需要修改在任务7中创建的文件storeemail.

php的代码，完成附件信息的