《PHP网站开发项目式教程》电子教案 任务4 提交表单数据

PAGE2《PHP网站开发项目式教程》教案基本信息说明模块任务4提交表单数据单元数3教学目标知识目标熟悉表单界面设计需要使用的各种元素掌握表单数据验证的意义及验证函数的定义及调用方法掌握使用HTML5进行表单数据验证的做法掌握表单数据提交的方法掌握文件上传功能的实现方法能力目标使学生具备设计表单界面、使用表单向服务器提交各种数据并上传文件的能力重点表单数据验证函数的定义及调用方法表单数据提交的方法文件上传功能的实现方法难点表单数据验证函数的定义及调用方法复选框数据提交、单选按钮和复选框不选择时提交数据存在的问题及解决方法保存上传文件的方法教学方法与教学手段教学方法案例分析、启发引导式和小组讨论教学手段通过运行所设计的案例，引导学生学习表单数据验证、表单数据提交和文件上传的相关知识教学内容表单界面设计、表单数据验证、表单数据提交、文件上传1.表单界面设计强调表单元素name和id属性的设置、表格布局表单元素<form>标记中method和action的作用说明创建图示表单页面使用表格布局表单元素表单元素name和id属性的设置要求及作用2.表单数据验证强调使用javaScript脚本代码获取表单元素及元素取值的方法、弹出提示消息的方法、函数的定义及调用方法、使用HTML5进行表单数据验证进行表单数据验证的意义（1）使用HTML5对表单中文本框取值的字符限制、个数限制、密码个数限制和字符限制等内容进行验证1）要求姓名只能包含字母和数字，且必须在6～20个字符之间，可以使用HTML5中表单元素新属性pattern定义正则表达式完成在用户名文本框标签中添加下面代码pattern="[a-zA-Z0-9]{6,20}"上面代码中[a-zA-Z0-9]表示可以出现的字符，{6,20}表示最少6个，最多20个使用属性required="required"将姓名设置为必填项。2）对年龄的要求是不能为空，并且数据要在0~100之间，使用HTML5中新型表单输入元素number结合新属性required可以实现设置最小值min为0，最大值max为100另外使用属性required="required"设置不允许为空3）对密码的要求是个人密码需要在6~10个字符之间；使用正则表达式属性pattern完成，在密码框中增加如下代码pattern="[a-zA-Z0-9!@#$%……&*]{6,10}"密码中可以使用特殊字符（根据需要可以增加）同时使用required="required"将密码设置为必填项4）对个人介绍的要求是不允许为空，使用required属性即可（2）使用JavaScript代码完成密码一致性验证使用脚本代码进行表单数据验证，阻止非法数据提交的本质做法是：当数据不符合要求时，禁用表单数据的提交功能。禁用表单数据提交功能的做法有如下两种：在<form>标签中使用onsubmit="returnfalse"在提交按钮元素标签中使用onclick="returnfalse"因此在定义和调用表单数据验证函数之后，要能够根据实际情况决定是否禁用表单数据的提交功能。1）定义脚本函数validate()，功能说明：获取两个密码比较两个密码，若是不一致，则弹出消息框提示，之后返回false2）调用函数在单击submit按钮时调用，单击该按钮后，将会触发<form>标签中的submit事件；在<form>标签中使用onsubmit="returnvalidate()"调用函数3.提交表单数据复选框数据提交、单选按钮和复选框不选择时提交数据存在的问题及解决方法（1）系统数组$_POST和$_GET的作用说明服务器端将根据表单标记中method属性的值确定获取数据的方法若method属性值为post，则使用系统数组$_POST接收表单数据；若method属性值为get，则使用系统数组$_GET接收表单数据，即一个表单所提交的数据总是以一个数组的方式保存在服务器中。两个系统数组元素键名的说明$_POST和$_GET都是关联数组，都需要通过键名来访问数组元素，在处理表单数据时，它们所使用的键名通常是表单元素name属性的值，例如，若文本框中name="uname"，则使用$_POST['uname']或者$_POST["uname"]或者"{$_POST['uname']}"可以获取到该文本框提交到服务器端的数据。（2）复选框组数据的提交复选框组提交的数据在服务器端以一个数组的形式保存，若表单标签<form>中method属性值为post，复选框组名称为like[]，在服务器端使用$_POST['like']接收并保存复选框组提交的数据，$_POST['like']以一个数组的形式存在数组元素的个数取决于用户选择的复选框的个数，而不是复选框组中包含的复选框的个数注意：如果将复选框组name属性值like[]改为like，那么，$_POST['like']只能获取到用户选择的最后一个复选框提交的数据。（3）函数implode()的应用为了方便输出和保存，通常要将复选框组提交的多个数据合并到一个变量中，例如用户选择了看书、音乐和爬山，则设置变量$like="看书音乐爬山"可使用函数implode()来完成，格式如下：implode(参数1，参数2):参数1：必选，指定在数组各个元素值之间的分隔字符参数2：必选，指定数组名称使用指定的分隔字符将指定数组的多个元素的值连接在一起，返回值为包含了所有元素及位于元素与元素之间的分隔符的字符串（4）应用isset()函数解决单选按钮和复选框不选择时提交数据存在的问题1）产生问题的原因：单选按钮或者复选框都属于组元素，若是没有选择选项，相当于该组不存在，即$_POST['sex']和$_POST['like']不存在，所以提示用户没有定义键名sex或者like。可以使用数组遍历观察数组键名和值若是没有输入姓名，遍历结果中是否存在键名为uname的元素？2）isset()函数该函数用于检测某个变量或者元素是否已声明且值不为null，函数格式如下。boolisset(参数)参数可以是普通变量，也可以是数组元素，若变量或数组元素存在，则返回true，否则返回false。例如：$name="";$null=null;$stu=["name"=>"张三"];var_dump(isset($name),isset($null),isset($stu['name']),isset($stu['age']));上面的结果分别是true、false、true、false3）解决问题使用isset()函数时因其返回值为真或假的特点，通常会将其作为if语句的条件，根据结果的真假来确定要进行的处理操作在form.php文件中增加条件判断结构：若用户选择了性别，就输出性别结果，否则输出“你没有选择性别”若用户选择了兴趣爱好，就将所有兴趣爱好结果合并到一个变量中再输出，否则输出“你没有选择兴趣爱好”。4.文件上传强调上传文件的保存方法、解决文件名称乱码问题；实现多文件的上传；实现大文件的上传（1）浏览器端的设置第一，需要在表单标签中设置Enctype属性值为multipart/form-data，只有设置为multipart/form-data编码格式，才能完成文件上传；第二，表单中method属性值需要设置为post。属性值get因为受到URL的限制，能够提交的数据长度严重受限，通常只有几千字节第三，action属性必须指定能够接收并处理上传文件的PHP文件。第四，必须在表单页面中增加文件域元素，使用<input>标记的type属性值“file”来生成文件域元素，同时设置name属性。第五，可以在文件域元素的前面增加name是max_file_size的隐藏元素，通过该元素的value属性设置该表单允许上传的最大文件大小。例如

<inputtype="hidden"name="max_file_size"value="15728640"/>

表示该表单允许上传的最大文件大小不能超出15M。需要注意的是，若要使用该隐藏元素，必须是放在文件域元素的前面。（2）服务器端的设置1）修改php.ini文件中的配置项提供的XAMPP集成环境中，PHP默认能够上传的文件的大小不超过40M，若是选择上传的文件大小超过40M，则文件上传操作无法成功完成。修改配置文件php.ini可以实现大文件的上传，需要修改的配置项有两项，分别是upload_max_filesize和post_max_size。upload_max_filesize配置设置的是允许上传文件大小的最大值，默认为40M，根据需要设置为合适的大小post_max_size用于控制在采用POST方法进行一次表单提交中，PHP所能够接收的最大数据量，默认为40M。如果希望使用PHP文件上传功能，则该配置项的值必须大于配置项upload_max_filesize的值2）系统数组$_FILESi.两个下标的设置及作用从浏览器端将文件上传到服务器端之后，该文件默认被存放在系统盘符下的存放临时文件的文件夹中，文件的名称也采用了临时名称。需要从系统数组$_FILES中获取上传文件的名称、类型、大小、临时存储信息和错误代码等相关信息，从而能够进一步将上传的文件以指定的存储位置和存储名称进行存储。假设文件域元素name属性值为file1，则第二个键名的用法和说明如下：$_FILES["file1"]["name"]：表示被上传文件的名称；$_FILES["file1"]["type"]：表示被上传文件的类型；$_FILES["file1"]["size"]：表示被上传文件的大小，以字节计；$_FILES["file1"]["tmp_name"]：表示文件在服务器中的临时存储位置及名称；$_FILES["file1"]["error"]：表示由文件上传导致的错误代码。ii.$_FILES["file1"]["error"]的错误代码说明UPLOAD_ERR_OK(0)：表示文件上传成功。UPLOAD_ERR_INI_SIZE(1)：表示文件大小超出php.ini中upload_max_filesize设置的能够上传的最大文件大小的限制。UPLOAD_ERR_FORM_SIZE(2)：表示文件大小超出表单中元素<inputtype="hidden"name="max_file_size">的value属性所设置的最大文件大小的限制。UPLOAD_ERR_PARTIAL(3)：文件仅部分上传。UPLOAD_ERR_NO_FILE(4)：未选择文件。UPLOAD_ERR_NO_TMP_DIR(6)：缺少临时目录。UPLOAD_ERR_CANT_WRITE(7)：无法写入磁盘。UPLOAD_ERR_EXTENSION(8)：PHP扩展中断了文件上传。使用文件域元素file1上传文件时，只要文件大小没有超出php.ini中post_max_size所设置的表单能够提交的最大数据限制，无论文件上传是否成功，数组元素$_FILES["file1"]["name"]都能得到所上传的文件的名称。若是上传失败，$_FILES["file1"]["size"]的结果是0，$_FILES["file1"]["type"]和$_FILES["file1"]["tmp_name"]的结果都是空串。若是文件大小超出了php.ini中post_max_size的值，表单数据无法提交，此时$_FILES["file1"]不存在。（3）简单文件上传实例左侧为上传文件的页面，右侧为上传之后的效果显示。可使用函数round()将文件大小转换为KB单位（4）函数move_uploaded_file()的格式及作用文件上传之后默认以临时文件名称保存在临时文件夹中，需要将其移至指定的位置按照指定的名称来保存，这一功能需要使用函数move_uploaded_file()来实现。函数move_uploaded_file()格式：move_uploaded_file(参数1,参数2)作用：将参数1指定的临时文件按照参数2中指定的位置和名称进行存储参数1通常是$_FILES["file"]["tmp_name"]参数2中“位置”使用一个文件夹来指定，文件名称则使用$_FILES["file"]["name"]得到。将上传文件保存到指定位置，相当于对文件做了移动和重命名工作。（5）解决文件名称乱码问题在PHP中处理上传的文件，特别是文件名称中包含中文字符时，经常会遇到编码的乱码问题，主要是因为文件名的编码可能与服务器或客户端的编码不一致。要解决上述问题，需要先获取文件名中的编码，判断之后决定是否要转换编码第一步，使用mb_detect_encoding()函数获取文件名字符串使用的编码。函数格式如下。mb_detect_encoding(string,encode)参数string，必选，表示待检测的字符串。参数encode，可选，指定检测的编码列表（可以是数组或逗号分隔的字符串）。若未指定，PHP8中只能从['ASCII','UTF-8']列表中检测。因此通常会使用字符串格式的"ASCII,UTF-8,GB2312,GBK"，或者数组格式的['ASCII','UTF-8','GB2312','GBK']内容作为第二个参数。第二步，判断并转换编码检测之后，对函数的返回结果进行判断，若不是UTF-8编码，再使用iconv()将字符串的编码转换为UTF-8编码，最后再使用move_uploaded_file()进行处理。$fname=$_FILES["file1"]["name"]$encode=mb_detect_encoding($fname,"ASCII,UTF-8,GB2312,GBK");if($encode!="UTF-8"){ $fname=iconv($encode,"UTF-8",$fname);//进行编码转换}move_uploaded_file($_FILES["file1"]["tmp_name"],"upload/{$fname}")（6）修改文件上传实例对上传的文件进行处理，需要考虑三种情况，分别是：文件大小在允许的范围内，上传成功；文件大小超出max_file_size或者upload_max_filesize的限制，上传失败；文件大小超出post_max_size的限制，上传失败。1）文件上传成功，显示下图所示信息，同时将文件保存到up/upload文件夹中2）文件大小超出upload_max_filesize或者max_file_size的限制3）文件大小超出post_max_size的限制若文件大小超出post_max_size的限制，表单数据无法提交，在服务器端不存在数组元素$_FILES['f1']（7）在浏览器端拦截超大文件可以在浏览器端增加表单数据验证功能，若文件大小超出post_max_size的限制，弹出消息框提示用户并阻止数据提交，避免在服务器端出现警告信息。定义脚本函数validate()，实现如下功能获取名称是f1的文件域元素，保存在变量f1中。使用f1.files[0]获取文件域元素上传的第一个文件，保存到变量file中。使用file.size得到上传文件的大小，判断是否超出post_max_size允许的大小100M，若是超出，则弹出消息框提示用户并返回false。（8）实现上传并显示头像功能在form.html页面中“个人介绍”行下面增加如图所示的界面效果，写出相应的界面代码（文件域元素名称为tximg），之后修改form.php文件，增加代码获取上传的头像文件信息，并将头像显示在浏览器中（效果如图所示）（9）多文件上传1）使用表单元素属性multiple设置允许多文件上传修改up.html文件，在<inputtype="file">中使用该属性，可以方便实现