martes, 6 de agosto de 2013

Capturar imagen y subir imagen con PhoneGap

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>
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);
?>
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

7 comentarios :

  1. 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?

    ResponderEliminar
    Respuestas
    1. En 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?

      Eliminar
  2. Buen 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

    ResponderEliminar
  3. hola 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

    ResponderEliminar
  4. saludos 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....

    ResponderEliminar
    Respuestas
    1. Como 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

      Eliminar
  5. He probado el código, pero no me funciona siempre me arroja error "null".
    Uso la versión 3.5 de phonegap y tengo agregado el plugin FileTransfer.

    Alguna idea de que podría ser el problema?

    ResponderEliminar