Para capturar una imagen realizada
desde la cámara de un dispositivo móvil y posteriormente subirla a
un servidor Web mediante PhoneGap, deberemos realizar dos pasos:
primero realizar la captura de la imagen y en segundo lugar subir el
archivo.
Para hacer la captura y el envío del
archivo al servidor Web emplearemos las funciones nativas de
PhoneGap, posteriormente necesitaremos guardar la imagen en el
servidor y para ello se empleará cualquier lenguaje de programación
del lado del servidor, en este ejemplo se empleara PHP.
En primer lugar la captura y subida de
la imagen. El código HTML y Javascript sería el siguiente, a
continuación la explicación:
<html>
<head>
<title>Subida de fotos</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Esperar a que cargue PhoneGap
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap listo
function onDeviceReady() {
// lo que tengas que hacer
}
function getImage() {
navigator.camera.getPicture(uploadPhoto, function(message) {
alert('error al capturar imagen');
},{
quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI,
sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
});
}
function uploadPhoto(imageURI) {
var options = new FileUploadOptions(),
params = new Object ;
options.fileKey="file";
options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
options.mimeType="image/jpeg";
params.value1 = "test";
params.value2 = "param";
options.params = params;
options.chunkedMode = false;
var ft = new FileTransfer();
ft.upload(imageURI,"http://miservidor.com/services/upload.php",
function(){
console.log('imagen subida correctamente');
},
function(err){
console.log('error al subir la imagen, error code: ' + err.code);
},
options);
}
</script>
</head>
<body>
<button onclick="getImage();" id=”subir-foto”>Subir foto</button>
</body>
</html>
<head>
<title>Subida de fotos</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Esperar a que cargue PhoneGap
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap listo
function onDeviceReady() {
// lo que tengas que hacer
}
function getImage() {
navigator.camera.getPicture(uploadPhoto, function(message) {
alert('error al capturar imagen');
},{
quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI,
sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
});
}
function uploadPhoto(imageURI) {
var options = new FileUploadOptions(),
params = new Object ;
options.fileKey="file";
options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
options.mimeType="image/jpeg";
params.value1 = "test";
params.value2 = "param";
options.params = params;
options.chunkedMode = false;
var ft = new FileTransfer();
ft.upload(imageURI,"http://miservidor.com/services/upload.php",
function(){
console.log('imagen subida correctamente');
},
function(err){
console.log('error al subir la imagen, error code: ' + err.code);
},
options);
}
</script>
</head>
<body>
<button onclick="getImage();" id=”subir-foto”>Subir foto</button>
</body>
</html>
Lo primero será cargar PhoneGap y
esperar a que esté listo para usar sus funciones. Crearemos la
función getImage() que será la encarda de capturar la imagen. En
caso de que la captura se realice con éxito llamará a la función
uploadPhoto() que será la encargada de subirla al servidor (si se
produce algún error al realizar la captura se mostrará una alerta
indicándolo)
La función uploadPhoto() realizará la
subida del archivo, para ello emplearemos el File
Transfer API de PhoneGap. Lo
primero será crear los objetos options, params y ft necesarios.
FileKey será empleado por el fichero PHP para obtener la imagen;
fileName es el nombre del archivo creado al capturar la imagen desde
la cámara, al cual le quitaremos la ruta completa para quedarnos
únicamente con el nombre; mimeType es empleado para indicar al
servidor que tipo de archivo estamos enviando. En el objeto params
podemos incluir cualquier otro tipo de variable que necesitemos en
nuestra aplicación y posteriormente añadimos params al objeto
options.
A continuación se crea el objeto ft
FileTransfer y llamamos a su método upload para la realizar la
subida del archivo indicando el fichero; la ruta del fichero PHP
encargado de guardarlo en el servidor remoto; callback para cuando
falla la subida; callback para cuando la subida se ejecuta
correctamente; y las opciones definidas previamente
La captura y el envío de la imagen se
realizar al pulsar el botón HTML con id “subir foto” que llamará
a la función getImage().
Por último, el fichero upload.php alojado en tu servidor y que
guarda la foto en el servidor sería:
<?php
$ruta = "images/";
$nombre_imagen = "unnombre.jpg";
move_uploaded_file($_FILES["file"]["tmp_name"], $ruta.$nombre_imagen);
?>
$ruta = "images/";
$nombre_imagen = "unnombre.jpg";
move_uploaded_file($_FILES["file"]["tmp_name"], $ruta.$nombre_imagen);
?>
La realización de este tutorial está
realizada en base al artículo obtenido de
http://zacvineyard.com/blog/2011/03/upload-a-file-to-a-remote-server-with-phonegap
He estado buscando mucho y no se por que no recibe nada mi php, hago mis arrays de print_r($_FILES), print_r($_GET), print_r($_POST)y no recibo nada de nada :( ya llevo mucho rato intentando... espero puedas ayudarme, que podría estar mal en mi servidor?
ResponderEliminarEn ft.upload() dentro de la función uploadPhoto() sobraba un paréntesis. Cuando llamas a esta función se tiene que mostrar en la consola un mensaje de que la imagen se ha subido o de que se ha producido un error. ¿te da alguno de estos dos mensajes?
EliminarBuen dia, tengo una pregunta como se pueden subir un lote de imagenes que estan almacenados dentro del dispositivo mediante un array que invoca un local storage ya que lleva la informacion de un formulario. gracias
ResponderEliminarhola tengo un formulario donde guardo unos campos asi como el nombre de la imagen, como puedo subir el conjunto de imagenes almacenadas al momento de contarcon la conexion a internet
ResponderEliminarsaludos tengo una pregunta como puedo subir la imagen sin ser reemplazada es decir tomar el nombre de la imagen q captura y seguir subiedo sin reemplazar o sobrescribir....
ResponderEliminarComo la subida del archivo la haces con php, en $nombre_archivo puedes agregar al nombre una marca de tiempo que puedes hacerla con timestamp o date
EliminarHe probado el código, pero no me funciona siempre me arroja error "null".
ResponderEliminarUso la versión 3.5 de phonegap y tengo agregado el plugin FileTransfer.
Alguna idea de que podría ser el problema?