7
Bien, tengo una pequeña aplicación para cargar una imagen (usando phonegap, Jquery). Tengo una carga de manejo de jquery a través de AJAX. La imagen se está enviando pero no estoy seguro de cómo procesarla correctamente en el lateral. Cualquier pensamiento muy bienvenido! Aquí está mi código hasta ahora:Servidor PHP Cargar una imagen de Phonegap y Jquery
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);
}
?>
HTML básico:
<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()); });
});
});
