移動端網頁如何使用JqueryMobile+PHP實現上傳圖片的功能
首先，實現上傳功能。上傳功能是利用PHP實現的：
創建一個文件上傳表單
<html>
<body><form action="upload_file.php" method="post" enctype="multipart/form-data"> <label for="file">Filename:</label> <input type="file" name="file" id="file" /> <br /> <input type="submit" name="submit" value="Submit" /> </form> </body> </html> </pre><a href="/misc/goto?guid=4959551071484386777" target="_blank" title="派生到我的代碼片" style="text-indent:0;"></a></div></div>
</div>
其中，<form> 標簽的 enctype 屬性規定了在提交表單時要使用哪種內容類型。在表單需要二進制數據時，比如文件內容，請使用 "multipart/form-data"。
<input> 標簽的 type="file" 屬性規定了應該把輸入作為文件來處理。當在瀏覽器中預覽時，會看到輸入框旁邊有一個瀏覽按鈕。
</div>創建上傳腳本
"upload_file.php" 文件含有供上傳文件的代碼：
</div> </div><?php if ($_FILES["file"]["error"] > 0) { echo "Error: " . $_FILES["file"]["error"] . "<br />"; } else { echo "Upload: " . $_FILES["file"]["name"] . "<br />"; echo "Type: " . $_FILES["file"]["type"] . "<br />"; echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />"; 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"] - 由文件上傳導致的錯誤代碼
</ul>
</div>
上傳限制
在這個腳本中，增加對文件上傳的限制。用戶只能上傳 .gif 或 .jpeg 文件，文件大小必須小于 20 kb：
</div> </div><?phpif ((($_FILES["file"]["type"] == "image/gif") || ($_FILES["file"]["type"] == "image/jpeg") || ($_FILES["file"]["type"] == "image/pjpeg")) && ($_FILES["file"]["size"] < 20000)) { if ($_FILES["file"]["error"] > 0) { echo "Error: " . $_FILES["file"]["error"] . "<br />"; } else { echo "Upload: " . $_FILES["file"]["name"] . "<br />"; echo "Type: " . $_FILES["file"]["type"] . "<br />"; echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />"; echo "Stored in: " . $_FILES["file"]["tmp_name"]; } } else { echo "Invalid file"; } ?> </pre><br />注釋：對于 IE，識別 jpg 文件的類型必須是 pjpeg，對于 FireFox，必須是 jpeg。
</div>
保存被上傳的文件
上面的例子在服務器的 PHP 臨時文件夾創建了一個被上傳文件的臨時副本。
這個臨時的復制文件會在腳本結束時消失。要保存被上傳的文件，我們需要把它拷貝到另外的位置：
</div> </div><?php
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/pjpeg"))
&& ($_FILES["file"]["size"] < 20000))
{
if ($_FILES["file"]["error"] > 0)
{
echo "Return Code: " . $_FILES["file"]["error"] . "<br />";
}
else
{
echo "Upload: " . $_FILES["file"]["name"] . "<br />";
echo "Type: " . $_FILES["file"]["type"] . "<br />";
echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br />";if (file_exists("upload/" . $_FILES["file"]["name"])) { echo $_FILES["file"]["name"] . " already exists. "; } else { move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . $_FILES["file"]["name"]); echo "Stored in: " . "upload/" . $_FILES["file"]["name"]; } } } else { echo "Invalid file"; } ?> </pre><br />上面的腳本檢測了是否已存在此文件，如果不存在，則把文件拷貝到指定的文件夾。
注意，要在目錄下創建 "upload"文件夾要不然會出現錯誤。
前面這些內容在W3C中都可以找到相應的介紹，接下來就是把PHP和JqueryMobile結合起來實現圖片上傳了。
本以為簡單的加上Mobile的東西就行了，但是問題出現了：使用了JqueryMobile之后出現了無限Loading的情況、
原因是JQM把表單提交做成了異步，只需要在form中加上 data-ajax="false" 即可。
完整步驟如下：
先是用戶頁面index.php：
</div> </div><!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> <link rel="stylesheet" > <script src="http://code.jquery.com/jquery-1.5.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>演示PHP上傳文件</h1> </div><!-- /header --> <div data-role="content"> <form action="upload_file.php" method="post" enctype="multipart/form-data" data-ajax="false"> <label for="file">文件名稱</label> <input type="file" name="file" id="file" /> <br /> <input type="submit" name="submit" value="上傳！" /> </form> </div><!-- /content --> <div data-role="footer"> <h4>存到upload文件夾</h4> </div><!-- /footer --> </div><!-- /page --> </body> </body> </html> </pre><br />接著是上傳處理的頁面upload_file.php：
</div> </div><!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> <link rel="stylesheet" > <script src="http://code.jquery.com/jquery-1.5.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> </head> <body> <!-- 顯示圖片信息 --> <div data-role="page"> <div data-role="header"> <h1>顯示PHP上傳的文件信息</h1> </div><!-- /header --> <div data-role="content"> <?php if ($_FILES["file"]["error"] > 0) { echo "錯誤代碼: " . $_FILES["file"]["error"] . "<br />"; } else { echo "文件名稱: " . $_FILES["file"]["name"] . "<br />"; echo "文件類型: " . $_FILES["file"]["type"] . "<br />"; echo "文件大小: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />"; echo "臨時路徑: " . $_FILES["file"]["tmp_name"] . "<br />"; if (file_exists("upload/" . $_FILES["file"]["name"])) { echo "該文件已經存在"; } else { move_uploaded_file($_FILES["file"]["tmp_name"],"upload/" . $_FILES["file"]["name"]); echo "存儲路徑: " . "upload/" . $_FILES["file"]["name"]; } } ?> </div><!-- /content --> <div data-role="footer"> <a href="#myimage">點擊查看圖片</a> </div><!-- /footer --> </div><!-- /page --> <!-- 顯示圖片的div --> <div data-role="page" id="myimage"> <img src="<?php echo "upload/".$_FILES["file"]["name"]?>"/> </div><!-- /page --> </body> </body> </html> </pre><br />在虛擬機的瀏覽器地址欄輸入10.0.2.2或者在同一個局域網下的移動設備中輸入192.168.1.101訪問頁面：
來自：http://blog.csdn.net/pleasecallmewhy/article/details/18147507
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！相關經驗
相關資訊
sesese色
