¿Cómo subir archivos con Phonegap y JqueryMobile?

cordova jquery-mobile

Question

Estoy construyendo una aplicación móvil para Android con JQM y PhoneGap. Necesito subir un archivo (imagen) al servidor remoto (desde la galería o tomar una foto con la cámara). Básicamente se puede hacer utilizando API de archivo de fajo telefónico, el problema es que el servidor se escribió para admitir el envío de POST simple.

Lo que necesito es "simular" en mi solicitud de aplicación exacta, ya que se enviaría desde el siguiente formulario html. Además, necesito obtener la respuesta del servidor.

<form name="myWebForm" ENCTYPE="multipart/form-data" action="http://www.myurl.com/api/uploadImage "method="post">
    <input type="file" name="image" />
    <input type="submit" value="Submit"/>       
</form>

Traté de usar la API de archivo de paginación telefónica, pero la estructura de los datos recuperados en el lado del servidor es diferente de lo que debería ser.

Traté de implementar ese formulario en mi aplicación pero el botón "elegir archivo" estaba deshabilitado ...

¿Cómo se puede lograr sin hacer ningún cambio en el lado del servidor?

Answer 1

No puede usar el archivo de entrada en Phonegap. No es compatible. Necesitas hacer algo como esto:

    function onDeviceReady() {

        // Retrieve image file location from specified source
        navigator.camera.getPicture(uploadPhoto,
                                    function(message) { alert(''get picture failed''); },
                                    { quality: 50, 
                                    destinationType: navigator.camera.DestinationType.FILE_URI,
                                    sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY }
                                    );

    }

    function uploadPhoto(imageURI) {
        var options = new FileUploadOptions();
        options.fileKey="file";
        options.fileName=imageURI.substr(imageURI.lastIndexOf(''/'')+1)+''.png'';
        options.mimeType="text/plain";

        var params = new Object();

        options.params = params;

        var ft = new FileTransfer();
        ft.upload(imageURI, encodeURI("http://some.server.com/upload.php"), win, fail, options);
    }

    function win(r) {
        console.log("Code = " + r.responseCode);
        console.log("Response = " + r.response);
        console.log("Sent = " + r.bytesSent);
    }

    function fail(error) {
        alert("An error has occurred: Code = " + error.code);
        console.log("upload error source " + error.source);
        console.log("upload error target " + error.target);
    }

En el método getPicture elegirás cuál es tu fuente de archivo. Ver más información: http://docs.phonegap.com/en/2.1.0/cordova_file_file.md.html#FileTransfer

EDITAR:

La extensión fileName era necesaria, así como especificar el tipo de mime en formato ''text / plain'' para enviar imágenes en formato de texto. En cuanto a los params, si no los necesitas, ¿por qué usarlos?

Answer 2

No puede usar el archivo de entrada en Phonegap. No es compatible. Necesitas hacer algo como esto:

        <div ng-click="selectPicture()">selectPicture</div> // Put own HTML format but call the fuction

        // Angular fuction
             $scope.selectPicture = function () {
                var srcType = Camera.PictureSourceType.SAVEDPHOTOALBUM;
                var options = {
                    // Some common settings are 20, 50, and 100
                    quality: 50,
                    destinationType: Camera.DestinationType.FILE_URI,
                    // In this app, dynamically set the picture source, Camera or photo gallery
                    sourceType: srcType,
                    encodingType: Camera.EncodingType.JPEG,
                    mediaType: Camera.MediaType.PICTURE,
                    allowEdit: true,
                    correctOrientation: true  //Corrects Android orientation quirks
                }
                navigator.camera.getPicture(function cameraSuccess(imageUri) {
                    MobileUploadFile(imageUri);

                }, function cameraError(error) {
                    console.debug("Unable to obtain picture: " + error, "app");
                }, options);
            }

            function MobileUploadFile(imageURI) {
                //console.log(imageURI);   
                var options = new FileUploadOptions();
                options.fileKey = "file";
                options.fileName = imageURI.substr(imageURI.lastIndexOf(''/'') + 1);
                options.mimeType="image/jpeg";
                options.chunkedMode = false;

                var ft = new FileTransfer();
                ft.upload(imageURI, encodeURI("http://www.example.com/upload.php"), function(result){
                    //console.log(JSON.stringify(result));
                }, function(error){
                    //console.log(JSON.stringify(error));
                }, options);
            };

     // php file
     <?php 
       // Directory where uploaded images are saved
        $dirname = "uploads/"; 
        // If uploading file
         if ($_FILES) {
             print_r($_FILES);
             mkdir ($dirname, 0777, true);
             move_uploaded_file($_FILES["file"]{"tmp_name"],$dirname."/".$_FILES["file"]["name"]);
        }
      ?>