移動端網頁如何使用JqueryMobile+PHP實現上傳圖片的功能

原創 网络全息测量 2020-06-15 13:21

首先，實現上傳功能。上傳功能是利用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

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

jQuery Mobile 按鈕

三種方式創建按鈕：           <button>按鈕</button>    //用於表單提交           <input  type="button"  value="按鈕">  //用於表單提交           <a

berained 2020-06-16 02:00:14

jQuery Mobile高手必備的十大技巧和代碼片段

與任何新技術一樣，常常難就難在如何開始入手。 有鑑於此，我們整理出了與jQuery Mobile庫有關的我認爲最便利的一些技巧、方法和代碼片段。 由於本文不是旨在全面介紹使用jQuery Mobile庫的入門知識，會忽略掉一些相

网络全息测量 2020-06-15 13:21:41

JQuery Mobile學習筆記

6、按鈕 6.1 鏈接按鈕 （1）默認按鈕，填充其外層容器的整個寬度  <a href="#" data-role="button">Button</a> （2）緊湊按鈕，寬度與內部的文本和圖標的寬度相同 <a href="#" 

网络全息测量 2020-06-15 13:21:41

JQuery Mobile 手機顯示頁面偏小

Rex_In 2020-02-25 19:19:37

jquery mobile兩個頁面以及源碼（登錄與註冊）

网络全息测量 2020-02-21 18:32:45

Jquery mobile開發問題收集

网络全息测量 2020-02-21 18:32:43

Jquery mobile表單提交

网络全息测量 2020-02-21 18:32:43

JQuery Mobile 頁面過渡效果設置

网络全息测量 2020-02-21 18:32:43

JQuery 創建可摺疊效果的菜單

网络全息测量 2020-02-21 18:32:43

Jquery mobile 提交表單轉換到另外一個頁面或者留在本頁面的方案！

网络全息测量 2020-02-21 18:32:43

通過AJAX和PHP，提交JQuery Mobile表單

网络全息测量 2020-02-21 18:32:43

JQuery Mobile表單

网络全息测量 2020-02-21 18:32:43

Jquery 資料收集平臺

网络全息测量 2020-02-21 18:32:43

phoneGap&jquery mobile

Gavin-YE 2020-02-20 15:41:54

JQuery Mobile入門——頁面緩存

Gavin-YE 2020-02-20 15:41:54