移动端网页如何使用JqueryMobile+PHP实现上传图片的功能

本文介绍如何使用PHP实现文件上传功能,并结合JqueryMobile解决移动端上传问题。包括创建上传表单、处理上传文件、限制文件类型及大小等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

首先,实现上传功能。上传功能是利用PHP实现的:

创建一个文件上传表单

01 <html> 
02 <body> 
03    
04 <form action="upload_file.php" method="post" 
05 enctype="multipart/form-data"
06 <label for="file">Filename:</label> 
07 <input type="file" name="file" id="file"/>  
08 <br /> 
09 <input type="submit" name="submit" value="Submit"/> 
10 </form> 
11    
12 </body> 
13 </html>

    其中,<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     <scriptsrc="http://code.jquery.com/jquery-1.5.min.js"></script
    10     <scriptsrc="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script
    11 </head
    12    
    13 <body
    14    
    15 <divdata-role="page"
    16    
    17     <divdata-role="header"
    18         <h1>演示PHP上传文件</h1
    19     </div><!-- /header --> 
    20    
    21     <divdata-role="content"
    22         <form action="upload_file.php" method="post" enctype="multipart/form-data"data-ajax="false"
    23         <labelfor="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     <divdata-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     <scriptsrc="http://code.jquery.com/jquery-1.5.min.js"></script
    10     <scriptsrc="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script
    11 </head
    12    
    13 <body
    14    
    15 <!-- 显示图片信息 --> 
    16 <divdata-role="page"
    17    
    18     <divdata-role="header"
    19         <h1>显示PHP上传的文件信息</h1
    20     </div><!-- /header --> 
    21    
    22     <divdata-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     <divdata-role="footer"
    48         <ahref="#myimage">点击查看图片</a
    49     </div><!-- /footer --> 
    50    
    51 </div><!-- /page --> 
    52    
    53    
    54 <!-- 显示图片的div --> 
    55 <div data-role="page"id="myimage"
    56     <imgsrc="<?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访问页面:
    20140111210909484.jpg

    评论
    添加红包

    请填写红包祝福语或标题

    红包个数最小为10个

    红包金额最低5元

    当前余额3.43前往充值 >
    需支付:10.00
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包
    实付
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明:

    1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

    余额充值