2011-03-13 52 views
2

我有一個簡單的PHP上傳工作表單(在網上工作),也能夠使用PhoneGap(base64)從iPhone捕捉照片並在設備上顯示。從iPhone上傳照片到PHP使用PhoneGap

但我不知道如何使用PHP將其上傳到我的服務器。

下面是運行PHP代碼:

的index.php

<? 
//print_r($_POST); 

if($_POST["action"] == "Upload Image") 
{ 
unset($imagename); 

if(!isset($_FILES) && isset($HTTP_POST_FILES)) 
$_FILES = $HTTP_POST_FILES; 

if(!isset($_FILES['image_file'])) 
$error["image_file"] = "An image was not found."; 


$imagename = basename($_FILES['image_file']['name']); 
//echo $imagename; 

if(empty($imagename)) 
$error["imagename"] = "The name of the image was not found."; 

if(empty($error)) 
{ 
$newimage = "images/" . $imagename; 
//echo $newimage; 
$result = @move_uploaded_file($_FILES['image_file']['tmp_name'], $newimage); 
if(empty($result)) 
$error["result"] = "There was an error moving the uploaded file."; 
} 

} 

include("upload_form.php"); 

if(is_array($error)) 
{ 
while(list($key, $val) = each($error)) 
{ 
echo $val; 
echo "<br>\n"; 
} 
} 

include("list_images.php"); 

?> 

這裏是兩個包括...

UPLOAD_FORM.PHP

<form method="POST" enctype="multipart/form-data" name="image_upload_form" action="<?$_SERVER["PHP_SELF"];?>"> 
<p><input type="file" name="image_file" size="20" value="beautiful.jpg"></p> 
<p><input type="submit" value="Upload Image" name="action"></p> 
</form> 

LIST_IMAGES。 PHP

<? 
$handle = @opendir("images"); 

if(!empty($handle)) 
{ 
while(false !== ($file = readdir($handle))) 
{ 
if(is_file("images/" . $file)) 
echo '<img src="images/' . $file . '"><br><br>'; 
} 
} 

closedir($handle); 
?> 

下面是PhoneGap的

INDEX.HTML在iPhone 4(iOS 4.2的)運行(在PhoneGap的WWW目錄中運行)的代碼

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
    <!-- Change this if you want to allow scaling --> 
    <meta name="viewport" content="width=default-width; user-scalable=yes" /> 

    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 

    <link type="text/css" rel="stylesheet" href="style.css"> 



    <!-- iPad/iPhone specific css below, add after your main css > 
    <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />   
    <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />  
    --> 
    <!-- If you application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here --> 
    <script type="text/javascript" charset="utf-8" src="phonegap.0.9.4.min.js"></script> 
    <script type="text/javascript" charset="utf-8"> 


    // If you want to prevent dragging, uncomment this section 
    /* 
    function preventBehavior(e) 
    { 
     e.preventDefault(); 
    }; 
    document.addEventListener("touchmove", preventBehavior, false); 
    */ 

    function onBodyLoad() 
    { 
     document.addEventListener("deviceready",onDeviceReady,false); 
    } 

    /* When this function is called, PhoneGap has been initialized and is ready to roll */ 
    function onDeviceReady() 
    { 
     // do your thing! 
    } 


    function getPicture(sourceType) 
    { 
     var options = { quality: 10 }; 
     if (sourceType != undefined) { 
      options["sourceType"] = sourceType; 

     } 
     // if no sourceType specified, the default is CAMERA 
     navigator.camera.getPicture(getPicture_Success, null, options); 
    }; 

    function getPicture_Success(imageData) 
    { 
      //alert("getpic success"); 
      document.getElementById("test_img").src = "data:image/jpeg;base64," + imageData; 


    } 



    </script> 
    </head> 
    <body onload="onBodyLoad()" marginheight=0 marginwidth=0 leftmargin=0 topmargin=0> 



      <h1>Camera</h1> 

      <img style="width:80px;height:120px" id="test_img" src="" /> 

      <p> 

      <!-- for testing, add the buttons below --> 

      <button onclick="getPicture()">From Camera</button> 

      <p> 



      <button onclick="getPicture(PictureSourceType.PHOTO_LIBRARY)">From Photo Library</button> 




    </body> 
</html> 
</html> 

順便說一句,雖然我可以抓住從一個新的圖片設備相機,我已經完全無法從圖書館獲取圖像......如果有人知道如何做到這一點,我也會很感激。

有沒有人能夠從PhoneGap/iPhone上傳照片到PHP?任何雙方的源代碼將非常感激。

+0

您正在使用'@'錯誤抑制運算符a * lot *。請刪除所有這些代碼,然後在PHP文件的頂部添加以下兩條語句:'ini_set('display_errors',true); error_reporting(-1);'這些步驟將揭示可能潛伏的一些PHP錯誤。 – Charles 2011-03-13 01:49:18

+0

查爾斯,php代碼很好用。我無法弄清的是如何訪問在移動Safari上呈現的基本64 jpg,使用JavaScript(這是PhoneGap使用的)獲取它的句柄,然後將其上傳到運行php代碼的服務器。有什麼想法嗎? – frednikgohar 2011-03-14 00:02:43

+0

唉,我對iPhone開發或PhoneGap一無所知。我不確定爲什麼base64會涉及到,如果你只是拍攝一張圖像,並將其發佈到PHP腳本中... – Charles 2011-03-14 00:12:56

回答

0

在PhoneGap的:

$.post(URLReport,{ 
    pic1: document.getElementById("image1").src.slice(23), 
}, function(xml) { 
    //stuff to do on success 
}); 

在服務器:

if (isset($_POST['pic1'])) { 
    $pic = base64_decode($_POST['pic1']); 
    if (strlen($pic) > 9) { 
    $fh = fopen(yourfilename, 'w') or die("can't open file"); 
    fwrite($fh, $pic); 
    fclose($fh); 
    } 
} 

容易心慌。