使用 PhoneGap 将照片从 iPhone 上传到 PHP答案

【问题标题】：Upload Photo from iPhone to PHP Using PhoneGap使用 PhoneGap 将照片从 iPhone 上传到 PHP
【发布时间】：2011-07-14 07:00:02
【问题描述】：

我有一个在 PHP 中工作的简单上传表单（在 Web 中工作），还能够使用 PhoneGap (base64) 从 iPhone 捕获照片并将其显示在设备上。

但我不知道如何使用 PHP 将其上传到我的服务器。

这是在 PHP 中运行的代码：

索引.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 中运行在 iPhone 4 (iOS 4.2) 上的代码

INDEX.HTML（在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？非常感谢任何双方的源代码。

【问题讨论】：

您正在使用@ 错误抑制运算符 lot。请从您的代码中删除所有这些，然后在 PHP 文件的顶部添加以下两个语句：ini_set('display_errors', true); error_reporting(-1); 这些步骤将揭示一些可能潜伏的 PHP 错误。
Charles，php 代码运行良好。我想不通的是如何访问在移动 safari 上呈现的 base 64 jpg，使用 JavaScript（这是 PhoneGap 使用的）处理它，然后将其上传到运行 php 代码的服务器。有什么想法吗？
唉，我对 iPhone 开发或 PhoneGap 一无所知。如果您只是拍摄图像并将POSTing 到 PHP 脚本中，我不确定为什么会涉及 base64...

标签： php javascript iphone upload cordova

【解决方案1】：

Base64 选项实际上只是为了便于在网页上显示。如果不需要，请不要使用它。

我想说你最好的选择是使用 FILE_URI 而不是 DATA_URL 作为 Camera.DestinationType

查看http://docs.phonegap.com/phonegap_camera_camera.md.html 了解更多信息

【讨论】：

【解决方案2】：

在电话间隙中：

$.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);
  }
}

简单易懂。

【讨论】：

【解决方案3】：

使用选项PHOTOLIBRARY 或SAVEDPHOTOALBUM 从您的手机中获取现有图片。在http://docs.phonegap.com/en/1.4.0/phonegap_camera_camera.md.html#Camera 上查看更多信息。

【讨论】：