javascript 使用 PhoneGap 从 iPhone 上传照片到 PHP
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5286744/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Upload Photo from iPhone to PHP Using PhoneGap
提问by frednikgohar
I have a simple upload form working in PHP (works in web) and also am able to capture a photo from iPhone using PhoneGap (base64) and displaying it on the device.
我有一个在 PHP 中工作的简单上传表单（在网络中工作），并且还能够使用 PhoneGap（base64）从 iPhone 捕获照片并将其显示在设备上。
But I can't figure out how to upload it to my server with PHP.
但我不知道如何使用 PHP 将其上传到我的服务器。
Here's the code running in 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");
?>
And here are the two includes...
这是两个包括...
UPLOAD_FORM.PHP
上传表格.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
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);
?>
Here's the code running on iPhone 4 (iOS 4.2) in PhoneGap
这是在 PhoneGap 中运行在 iPhone 4 (iOS 4.2) 上的代码
INDEX.HTML (running in WWW directory in PhoneGap)
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>
Incidentally, while I can grab a fresh picture from the device camera, I've been completely unable to get images from the Library... if anyone knows how to do that, I'd appreciate feedback there too.
顺便说一句，虽然我可以从设备相机中获取新照片，但我完全无法从库中获取图像......如果有人知道如何做到这一点，我也很感激那里的反馈。
Had anyone been able to upload photos from PhoneGap/iPhone to PHP? Any source code on both sides of this would be GREATLY appreciated.
有没有人能够将照片从 PhoneGap/iPhone 上传到 PHP？非常感谢双方的任何源代码。
采纳答案by Samyak Bhuta
Use options PHOTOLIBRARYor SAVEDPHOTOALBUMto get existing pictures from your phone. See more at http://docs.phonegap.com/en/1.4.0/phonegap_camera_camera.md.html#Camera.
使用选项PHOTOLIBRARY或SAVEDPHOTOALBUM从手机获取现有图片。在http://docs.phonegap.com/en/1.4.0/phonegap_camera_camera.md.html#Camera 上查看更多信息。
回答by chris
The Base64 option is really just for ease of displaying on the webpage. if it's not needed then don't use it.
Base64 选项实际上只是为了便于在网页上显示。如果不需要，则不要使用它。
i'd say your best option is to use FILE_URI instead of DATA_URL for Camera.DestinationType
我想说你最好的选择是对 Camera.DestinationType 使用 FILE_URI 而不是 DATA_URL
check out http://docs.phonegap.com/phonegap_camera_camera.md.htmlfor more info
查看http://docs.phonegap.com/phonegap_camera_camera.md.html了解更多信息
回答by Gausie
In phonegap:
在 phonegap 中：
$.post(URLReport,{
pic1: document.getElementById("image1").src.slice(23),
}, function(xml) {
//stuff to do on success
});
On server:
在服务器上：
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);
}
}
Easy peasy.
十分简单。
