1、任务十一 复杂的附件添加与处理方法n复杂的附件添加，是指在写邮件界面中，点击文本“添加附件”后，在不显示文件域元素的情况下，直接完成附件的添加，并且将已经添加的附件的名称和大小信息显示在写邮件界面中。11.1 设计“添加附件”页面n显示在页面中的“添加附件”文本实际上是一个独立的页面文件的内容，页面文件名称是up.php，该文件作为浮动框架子页面嵌入在writeemail.php文件中。n在文件up.php中包含了两部分的内容：第一部分是设计选择附件的界面；第二部分是附件文件的上传与处理。11.1.1 选择附件的界面设计n为了方便控制文本“添加附件”和文件域元素的位置，需要将文件up.php的
2、页面边距定义为0。n在文件up.php中需要两个页面元素，分别是文件域元素和“添加附件”文本。n设计“添加附件”文本时，使用标记定界，定义文本的样式为：字号10pt，文本的行高20px，文本颜色为蓝色，带有下划线。n这里所说的点击文本“添加附件”实现附件的添加过程，在实际操作中点击的是表单文件域元素的“浏览”按钮；采用的做法是将“浏览”按钮叠放在文字“添加附件”的前面，且被设计为透明效果，所以用户看到的只有“添加附件”文本，实现这种设计的关键是文件域元素的样式定义。11.1.1 选择附件的界面设计n在up.php文件中插入表单，设计name和id是file1的文件域元素，使用id选择符#fil
3、e1定义文件域元素的样式，样式要求如下：n（1）高度是20px，与“添加附件”文本的行高一致；n（2）使用滤镜filter:alpha设置文件域元素的透明效果，在IE浏览器中要使用样式代码filter:alpha(opacity=0);设置，而在其它浏览器中则要使用样式代码opacity:0;设置，为了保证在各种浏览器中都起作用，这两种样式同时定义即可；11.1.1 选择附件的界面设计n（3）要做到文件域元素与“添加附件”文本的层叠显示效果，需要将文件域元素进行绝对定位，只有绝对定位的元素能够放在其它元素的前面或后面，绝对定位之后，要保证定位在“添加附件”文本位置的正好是文件域元素中的“浏览”
4、按钮，所以定位时要将文件域元素中的文本框部分向左移动到浏览器窗口左边框外侧，保证“浏览”按钮的位置与“添加附件”文本一致，使用绝对定位且横坐标为-160px进行设置，纵坐标设置为0即可，将z-index设置为2，保证将文件域元素显示在文本“添加附件”的前面；n（4）使用代码cursor:pointer;将鼠标指针设为手状。11.1.2 表单界面内容与数据处理功能的合并n1.使用submit()方法提交表单数据n在页面up.php中点击“添加附件”实现文件上传时，需要使用表单的submit()方法来提交数据。n当文件域元素的文本框内容发生变化时，调用submit()方法。用户点击“添加附件”文本
5、选择文件之后，在文件域元素的文本框中会显示文件的信息，这就意味着文本框的内容发生了变化，此时会触发文本框的change事件，因此只需要在文件域元素标记内部使用代码onchange=document.表单名称.submit();即可完成数据的提交。n修改up.php文件代码，在标记内部增加代码onchange=document.form1.submit();实现数据上传，此处的form1是表单标记中 name属性的取值。n2.获取并处理上传的文件n在up.php文件中同时包含了表单界面的设计和表单数据提交之后的处理功能，因此在数据提交之前要先判断数据是否已经提交，否则会出现代码错误。n使用iss
6、et()函数判断数据是否已经提交，即判断系统数组元素$_FILESfile1是否已经被设置，若已经设置，则说明数据已经提交，即可执行数据处理部分的代码。11.2 添加与删除附件功能的实现n添加附件，是指点击“添加附件”文本，能够将上传的文件信息显示在写邮件页面中，同时还需要准备好要传递给服务器保存在数据表emailmsg中的附件信息内容。n删除附件，是指点击“删除”文本时，能够将对应的附件信息从写邮件页面中删除，同时要修改在添加附件时准备好的、要上传给服务器保存在数据表emailmsg中的附件信息，还要请求服务器删除文件夹upload中的相应文件。1.使用浮动框架嵌入上传附件页面n添加附件的页
7、面文件up.php需要使用浮动框架嵌入到页面文件writeemail.php中，在writeemail.php表格的“主题”和“内容”之间增加一行，在右侧单元格中插入浮动框架，浮动框架的设计要求如下：n宽度100px，高度30px，没有滚动条，边框设置为0，名称是upfile，初始状态加载的页面文件是up.php。2.接收上传附件的元素设计n（1）在页面中增加接收附件名称和大小信息的文本框元素n点击“添加附件”上传文件后，服务器端已经接收并存储了上传的文件，但是，需要将上传文件的名称大小等信息显示在写邮件界面中，另外，发送邮件时，需要将所有附件以“(随机数)文件名称(大小);”这种格式连接在一
8、起提交给服务器，存储在邮件信息数据表emailmsg的attachment列中。n为此，需要在writeemail.php文件中添加两个隐藏的文本框，一个文本框id为attachmsg2，用于接收up.php文件上传的当前附件的名称和大小信息；一个文本框id为file，用于接收up.php文件已经上传的所有附件的“(随机数)文件名称(大小);”信息。文本框元素设计说明n为了能够观察到效果，临时将两个文本框都设置为显示状态，添加三个附件后，两个文本框及附件信息显示效果如图所示。“主题”文本框下面第一个文本框id是attachmsg2，只显示最后添加的附件的名称和大小信息；第二个文本框id是fil
9、e，按顺序显示三个附件的相关信息。（2）为文本框传递数据n修改up.php文件代码，在move_uploaded_file($ftmpname,upload/$name1);之后添加代码，将上传附件的名称大小等信息传递到页面文件writeemail.php的两个文本框元素中（3）用于显示附件信息的元素设计n每上传一个附件之后，需要将writeemail.php页面中id=attachmsg2的文本框元素的内容获取出来，在前面增加附件图标，后面增加“删除”文本之后，以图11-2中的效果显示在页面中。n因为附件图标和“删除”文本需要在所有的附件中使用，因此在添加附件之前先准备好这两个元素，两个元素
10、初始状态都是隐藏，id分别为attachflag和delete，点击“添加附件”时，分别复制这两个元素作为段落元素的子元素。11.2.2 添加段落节点显示附件信息n要显示在writeemail.php页面中的所有附件信息都需要使用段落标记控制，之后将段落元素作为元素的子元素添加到页面中，项目中使用脚本函数appendattachment()实现这一功能。11.2.3 删除附件n删除附件时需要完成两个部分的功能，第一，删除图11-2中写邮件界面内显示的附件信息；第二，要删除保存在upload文件夹下的附件文件。n删除写邮件界面中的附件信息，需要定义脚本函数完成；删除upload文件夹中的附件文件，需要使用Ajax完成浏览器与服务器的交互，最终实现服务器端的文件删除操作。n删除附件操作，需要定义的脚本函数有两个：函数createXML()，用于创建对象XMLHttpRequest的实例；函数dele()，用于删除写邮件界面中的附件信息，删除id=file的文本框中的相应附件的“(随机数)文件名(大小);”格式的信息，通过Ajax向服务器端发出请求，提交要删除的文件的“(随机数)文件名”格式信息。n除了定义脚本函数，还需要定义一个PHP文件，用于接收文件名称并删除附件文件，项目中定义的文件是delefujian.php。
