首先,实现上传功能。上传功能是利用PHP实现的:
创建一个文件上传表单
其中,<form> 标签的 enctype 属性规定了在提交表单时要使用哪种内容类型。在表单需要二进制数据时,比如文件内容,请使用 "multipart/form-data"。
<input> 标签的 type="file" 属性规定了应该把输入作为文件来处理。当在浏览器中预览时,会看到输入框旁边有一个浏览按钮。
创建上传脚本
"upload_file.php" 文件含有供上传文件的代码:
01 |
<?php |
02 |
if ( $_FILES [ "file" ][ "error" ]
> 0) |
03 |
{ |
04 |
echo "Error:
" . $_FILES [ "file" ][ "error" ]
. "<br
/>" ; |
05 |
} |
06 |
else |
07 |
{ |
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" ]; |
12 |
} |
13 |
?> |
通过使用 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:
01 |
<?php |
02 |
|
03 |
if ((( $_FILES [ "file" ][ "type" ]
== "image/gif" ) |
04 |
||
( $_FILES [ "file" ][ "type" ]
== "image/jpeg" ) |
05 |
||
( $_FILES [ "file" ][ "type" ]
== "image/pjpeg" )) |
06 |
&&
( $_FILES [ "file" ][ "size" ]
< 20000)) |
07 |
{ |
08 |
if ( $_FILES [ "file" ][ "error" ]
> 0) |
09 |
{ |
10 |
echo "Error:
" . $_FILES [ "file" ][ "error" ]
. "<br
/>" ; |
11 |
} |
12 |
else |
13 |
{ |
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" ]; |
18 |
} |
19 |
} |
20 |
else |
21 |
{ |
22 |
echo "Invalid
file" ; |
23 |
} |
24 |
|
25 |
?> |
注释:对于 IE,识别 jpg 文件的类型必须是 pjpeg,对于 FireFox,必须是 jpeg。
保存被上传的文件
上面的例子在服务器的 PHP 临时文件夹创建了一个被上传文件的临时副本。
这个临时的复制文件会在脚本结束时消失。要保存被上传的文件,我们需要把它拷贝到另外的位置:
01 |
<?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)) |
06 |
{ |
07 |
if ( $_FILES [ "file" ][ "error" ]
> 0) |
08 |
{ |
09 |
echo "Return
Code: " . $_FILES [ "file" ][ "error" ]
. "<br
/>" ; |
10 |
} |
11 |
else |
12 |
{ |
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
/>" ; |
17 |
|
18 |
if ( file_exists ( "upload/" . $_FILES [ "file" ][ "name" ])) |
19 |
{ |
20 |
echo $_FILES [ "file" ][ "name" ]
. "
already exists. " ; |
21 |
} |
22 |
else |
23 |
{ |
24 |
move_uploaded_file( $_FILES [ "file" ][ "tmp_name" ], |
25 |
"upload/" . $_FILES [ "file" ][ "name" ]); |
26 |
echo "Stored
in: " . "upload/" . $_FILES [ "file" ][ "name" ]; |
27 |
} |
28 |
} |
29 |
} |
30 |
else |
31 |
{ |
32 |
echo "Invalid
file" ; |
33 |
} |
34 |
?> |
上面的脚本检测了是否已存在此文件,如果不存在,则把文件拷贝到指定的文件夹。
注意,要在目录下创建 "upload"文件夹要不然会出现错误。
前面这些内容在W3C中都可以找到相应的介绍,接下来就是把PHP和JqueryMobile结合起来实现图片上传了。
本以为简单的加上Mobile的东西就行了,但是问题出现了:使用了JqueryMobile之后出现了无限Loading的情况、
原因是JQM把表单提交做成了异步,只需要在form中加上 data-ajax="false" 即可。
完整步骤如下:
先是用户页面index.php:
01 |
<!DOCTYPE
HTML> |
02 |
|
03 |
< html > |
04 |
|
05 |
< head > |
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 > |
11 |
</ head > |
12 |
|
13 |
< body > |
14 |
|
15 |
< div data-role = "page" > |
16 |
|
17 |
< div data-role = "header" > |
18 |
< h1 >演示PHP上传文件</ h1 > |
19 |
</ div > <!--
/header --> |
20 |
|
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" /> |
25 |
< br /> |
26 |
< input type = "submit" name = "submit" value = "上传!" /> |
27 |
</ form > |
28 |
</ div > <!--
/content --> |
29 |
|
30 |
< div data-role = "footer" > |
31 |
< h4 >存到upload文件夹</ h4 > |
32 |
</ div > <!--
/footer --> |
33 |
|
34 |
</ div > <!--
/page --> |
35 |
</ body > |
36 |
|
37 |
</ body > |
38 |
</ html > |
接着是上传处理的页面upload_file.php:
01 |
<!DOCTYPE
HTML> |
02 |
|
03 |
< html > |
04 |
|
05 |
< head > |
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 > |
11 |
</ head > |
12 |
|
13 |
< body > |
14 |
|
15 |
<!--
显示图片信息 --> |
16 |
< div data-role = "page" > |
17 |
|
18 |
< div data-role = "header" > |
19 |
< h1 >显示PHP上传的文件信息</ h1 > |
20 |
</ div > <!--
/header --> |
21 |
|
22 |
< div data-role = "content" > |
23 |
<? php |
24 |
if
($_FILES["file"]["error"] > 0) |
25 |
{ |
26 |
echo
"错误代码: " . $_FILES["file"]["error"] . "< br />"; |
27 |
} |
28 |
else |
29 |
{ |
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"])) |
35 |
{ |
36 |
echo
"该文件已经存在"; |
37 |
} |
38 |
else |
39 |
{ |
40 |
move_uploaded_file($_FILES["file"]["tmp_name"],"upload/"
. $_FILES["file"]["name"]); |
41 |
echo
"存储路径: " . "upload/" . $_FILES["file"]["name"]; |
42 |
} |
43 |
} |
44 |
?> |
45 |
</ div > <!--
/content --> |
46 |
|
47 |
< div data-role = "footer" > |
48 |
< a href = "#myimage" >点击查看图片</ a > |
49 |
</ div > <!--
/footer --> |
50 |
|
51 |
</ div > <!--
/page --> |
52 |
|
53 |
|
54 |
<!--
显示图片的div --> |
55 |
< div data-role = "page" id = "myimage" > |
56 |
< img src = "<?php
echo " upload/".$_FILES["file"]["name"]?>"/> |
57 |
</ div > <!--
/page --> |
58 |
|
59 |
|
60 |
</ body > |
61 |
|
62 |
</ body > |
63 |
</ html > |
在虚拟机的浏览器地址栏输入10.0.2.2或者在同一个局域网下的移动设备中输入192.168.1.101访问页面: