用jQuery Mobile + PHP實現手機文件上傳的實例教程

2024-09-04 11:45:11

字體：大中小

來源：轉載

供稿：網友

jQuery Mobile是jQuery 在手機上和平板設備上的版本,jQuery Mobile 不僅會給主流移動平臺帶來jQuery核心庫,而且會發布一個完整統一的jQuery移動UI框架,現在我們來講講jQuery Mobile + php在手機上上傳圖片的實例.

很簡單的一個小例子 jQuery Mobile + PHP 通過超全局 $_FILES 上傳,然后用move_uploaded_file()方法把上傳的圖片移動到到本地服務器下的文件夾.

下面是html代碼:

<!DOCTYPE html>

<html>

<head>

        <meta charset = "utf-8">

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">

        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

</head>

<body>

<div data-role="page" id="upload" >

       <div data-role="header"  >

                        <h1>校園祭</h1>

                        <a href="#pageone" data-rolr = button data-icon="home" class="ui-btn-left" >首頁</a>

        </div>

        <div data-role="content" >

        <form action="upload_file.php" method="post" enctype="multipart/form-data" data-ajax="false">

                        <input  id="uploadimg" name="file"  type="file"  runat="server" method="post"

                                       enctype="multipart/form-data" data-inline="true"  data-ajax="false" />

                        <center><button  data-inline="true"  >上傳</button></center>

        </form>

        </div>

        <div data-role="footer" data-position="fixed" data-fullscreen="true">

                        <h1>創新實驗</h1>

        </div>

</div>

</body>

</html>

php的代碼如下:

<?php

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"]))

        {  //開源軟件:Vevb.com

                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"];

        }

}

}

?>