PHP Server Upload an image from Phonegap and Jquery
Question
Okay I have a small app for uploading an image (using phonegap, Jquery). I have jquery handling upload via AJAX. The image is being sent but I am not sure how to process it correctly at the severside. Any thoughts very welcome! Here's my code so far:
PHP:
<?php
////////THE PROBLEM AREA I THNK//////////
if ($_REQUEST['image']) {
// convert the image data from base64
$imgData = base64_decode($_REQUEST['image']);
// set the image paths
$file = '/uploaded_files/' . md5(date('Ymdgisu')) . '.jpg';
$url = 'http://creativetree.co/creativetreeAlpha' . $file;
// delete the image if it already exists
if (file_exists($file)) { unlink($file); }
// write the imgData to the file
$fp = fopen($file, 'w');
fwrite($fp, $imgData);
fclose($fp);
}
echo "<h1>Page is online</h1>";
echo "<p>Nothing special just a first go at phonegap! </p>";
echo "<h2>Contents of uploaded_files Folder to show iphone upload</h2>";
$dir = '/homepages/22/d397139588/htdocs/creativetreeAlpha/uploaded_files';
if ($handle = opendir($dir)) {
while (false !== ($file = readdir($handle))) {
if ($file != "." && $file != "..") {
echo "$file\n";
echo "<br>";
}
}
closedir($handle);
}
?>
Basic HTML:
<script>
function onBodyLoad() {
document.addEventListener("deviceready",onDeviceReady,false);
}
</script>
</head>
<body onload="onBodyLoad()">
<body>
<h1>Upload an image</h1>
<div id="upload"
<input type="button" class="send-image" value="camera" />
<input type="button" class="send-image" value="library" />
<img style="width:60px; height:60px" id="image" src="" />
</div>
<div id="output"></div>
</body>
</html>
Javascript:
$(document).ready(function(){
$(document).bind('deviceready', function(){
function sendImage(src) {
src = (src == 'library') ? Camera.PictureSourceType.PHOTOLIBRARY : Camera.PictureSourceType.CAMERA;
navigator.camera.getPicture(success, fail, {quality: 45, sourceType: src});
function success(imageData) {
var url = 'http://creativetree.co/creativetreeAlpha/mobileImageUpload.php';
var params = {image: imageData};
// send the data
$.post(url, params, function(data) {
alert('sent');
// Display the selected image on send complete
$('#image').attr('src', 'data:image/jpeg;base64,' + params['image']);
});
}
}
function fail(message) { alert(message); }
$('.send-image').click(function () { sendImage($(this).val()); });
});
});
2 answers
solution1
1 2012-03-14 18:12:04
使用fwrite检查要在其中创建映像的目录的写入权限。
solution2
0 ACCPTED 2012-03-16 12:01:26
Cut a long story short I needed to set permissions on my online server folders.
Also worth noting for any new iphone Developers using phonegap and accessing a URL (essential for AJAX obviously). The URL must be set in the Xcode project (PhoneGap.plist contains an array to store external URL's).
This maybe obvious to some but seems to be not very well documented even by PhoneGap (or at least I did not see on my frantic google searches). The wiki tutorial I studyed mentioned nothing about this.
See image for details.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.