首先,实现上传功能。上传功能是利用PHP实现的:
创建一个文件上传表单
其中,<form> 标签的 enctype 属性规定了在提交表单时要使用哪种内容类型。在表单需要二进制数据时,比如文件内容,请使用 "multipart/form-data"。
<input> 标签的 type="file" 属性规定了应该把输入作为文件来处理。当在浏览器中预览时,会看到输入框旁边有一个浏览按钮。
创建上传脚本
"upload_file.php" 文件含有供上传文件的代码:
02 | if ( $_FILES [ "file" ][ "error" ] > 0) |
04 | echo "Error: " . $_FILES [ "file" ][ "error" ] . "<br />" ; |
08 | echo "Upload: " . $_FILES [ "file" ][ "name" ] . "<br />" ; |
09 | echo "Type: " . $_FILES [ "file" ][ "type" ] . "<br />" ; |
10 | echo "Size: " . ( $_FILES [ "file" ][ "size" ] / 1024) . " Kb<br />" ; |
11 | echo "Stored in: " . $_FILES [ "file" ][ "tmp_name" ]; |
通过使用 PHP 的全局数组 $_FILES,你可以从客户计算机向远程服务器上传文件。
第一个参数是表单的 input name,第二个下标可以是 "name", "type", "size", "tmp_name" 或 "error"。就像这样:
- $_FILES["file"]["name"] - 被上传文件的名称
- $_FILES["file"]["type"] - 被上传文件的类型
- $_FILES["file"]["size"] - 被上传文件的大小,以字节计
- $_FILES["file"]["tmp_name"] - 存储在服务器的文件的临时副本的名称
- $_FILES["file"]["error"] - 由文件上传导致的错误代码
上传限制
在这个脚本中,增加对文件上传的限制。用户只能上传 .gif 或 .jpeg 文件,文件大小必须小于 20 kb:
03 | if ((( $_FILES [ "file" ][ "type" ] == "image/gif" ) |
04 | || ( $_FILES [ "file" ][ "type" ] == "image/jpeg" ) |
05 | || ( $_FILES [ "file" ][ "type" ] == "image/pjpeg" )) |
06 | && ( $_FILES [ "file" ][ "size" ] < 20000)) |
08 | if ( $_FILES [ "file" ][ "error" ] > 0) |
10 | echo "Error: " . $_FILES [ "file" ][ "error" ] . "<br />" ; |
14 | echo "Upload: " . $_FILES [ "file" ][ "name" ] . "<br />" ; |
15 | echo "Type: " . $_FILES [ "file" ][ "type" ] . "<br />" ; |
16 | echo "Size: " . ( $_FILES [ "file" ][ "size" ] / 1024) . " Kb<br />" ; |
17 | echo "Stored in: " . $_FILES [ "file" ][ "tmp_name" ]; |
注释:对于 IE,识别 jpg 文件的类型必须是 pjpeg,对于 FireFox,必须是 jpeg。
保存被上传的文件
上面的例子在服务器的 PHP 临时文件夹创建了一个被上传文件的临时副本。
这个临时的复制文件会在脚本结束时消失。要保存被上传的文件,我们需要把它拷贝到另外的位置:
02 | if ((( $_FILES [ "file" ][ "type" ] == "image/gif" ) |
03 | || ( $_FILES [ "file" ][ "type" ] == "image/jpeg" ) |
04 | || ( $_FILES [ "file" ][ "type" ] == "image/pjpeg" )) |
05 | && ( $_FILES [ "file" ][ "size" ] < 20000)) |
07 | if ( $_FILES [ "file" ][ "error" ] > 0) |
09 | echo "Return Code: " . $_FILES [ "file" ][ "error" ] . "<br />" ; |
13 | echo "Upload: " . $_FILES [ "file" ][ "name" ] . "<br />" ; |
14 | echo "Type: " . $_FILES [ "file" ][ "type" ] . "<br />" ; |
15 | echo "Size: " . ( $_FILES [ "file" ][ "size" ] / 1024) . " Kb<br />" ; |
16 | echo "Temp file: " . $_FILES [ "file" ][ "tmp_name" ] . "<br />" ; |
18 | if ( file_exists ( "upload/" . $_FILES [ "file" ][ "name" ])) |
20 | echo $_FILES [ "file" ][ "name" ] . " already exists. " ; |
24 | move_uploaded_file( $_FILES [ "file" ][ "tmp_name" ], |
25 | "upload/" . $_FILES [ "file" ][ "name" ]); |
26 | echo "Stored in: " . "upload/" . $_FILES [ "file" ][ "name" ]; |
上面的脚本检测了是否已存在此文件,如果不存在,则把文件拷贝到指定的文件夹。
注意,要在目录下创建 "upload"文件夹要不然会出现错误。
前面这些内容在W3C中都可以找到相应的介绍,接下来就是把PHP和JqueryMobile结合起来实现图片上传了。
本以为简单的加上Mobile的东西就行了,但是问题出现了:使用了JqueryMobile之后出现了无限Loading的情况、
原因是JQM把表单提交做成了异步,只需要在form中加上 data-ajax="false" 即可。
完整步骤如下:
先是用户页面index.php:
06 | < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" /> |
07 | < meta name = "viewport" content = "width=device-width, minimum-scale=1, maximum-scale=1" > |
08 | < link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" > |
09 | < script src = "http://code.jquery.com/jquery-1.5.min.js" ></ script > |
10 | < script src = "http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js" ></ script > |
17 | < div data-role = "header" > |
21 | < div data-role = "content" > |
22 | < form action = "upload_file.php" method = "post" enctype = "multipart/form-data" data-ajax = "false" > |
23 | < label for = "file" >文件名称</ label > |
24 | < input type = "file" name = "file" id = "file" /> |
26 | < input type = "submit" name = "submit" value = "上传!" /> |
30 | < div data-role = "footer" > |
接着是上传处理的页面upload_file.php:
06 | < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" /> |
07 | < meta name = "viewport" content = "width=device-width, minimum-scale=1, maximum-scale=1" > |
08 | < link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" > |
09 | < script src = "http://code.jquery.com/jquery-1.5.min.js" ></ script > |
10 | < script src = "http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js" ></ script > |
18 | < div data-role = "header" > |
22 | < div data-role = "content" > |
24 | if ($_FILES["file"]["error"] > 0) |
26 | echo "错误代码: " . $_FILES["file"]["error"] . "< br />"; |
30 | echo "文件名称: " . $_FILES["file"]["name"] . "< br />"; |
31 | echo "文件类型: " . $_FILES["file"]["type"] . "< br />"; |
32 | echo "文件大小: " . ($_FILES["file"]["size"] / 1024) . " Kb< br />"; |
33 | echo "临时路径: " . $_FILES["file"]["tmp_name"] . "< br />"; |
34 | if (file_exists("upload/" . $_FILES["file"]["name"])) |
40 | move_uploaded_file($_FILES["file"]["tmp_name"],"upload/" . $_FILES["file"]["name"]); |
41 | echo "存储路径: " . "upload/" . $_FILES["file"]["name"]; |
47 | < div data-role = "footer" > |
48 | < a href = "#myimage" >点击查看图片</ a > |
55 | < div data-role = "page" id = "myimage" > |
56 | < img src = "<?php echo " upload/".$_FILES["file"]["name"]?>"/> |
在虚拟机的浏览器地址栏输入10.0.2.2或者在同一个局域网下的移动设备中输入192.168.1.101访问页面:
