Comment télécharger vos fichiers avec Phonegap et JqueryMobile?

Je suis en train de construire une application mobile pour Android avec JQM et PhoneGap.
J'ai besoin de télécharger un fichier (image) sur le serveur distant (à partir de la galerie ou de prendre une photo avec l'appareil photo).
Fondamentalement, il peut être fait à l'aide de phonegap fichier API, le problème est que le serveur a été écrit à l'appui de simple POST de présentation.

Ce dont j'ai besoin est de "simuler" dans mon application demande exacte qu'il serait envoyé à partir de la suite de formulaire html.
En plus j'ai besoin d'obtenir la réponse du serveur.

<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>

J'ai essayé d'utiliser phonegap fichier API, mais la structure de l'extrait de données sur le côté serveur est différente de ce qu'elle devrait être.

J'ai essayé de la mettre en forme dans mon application, mais la "choisissez un fichier" bouton est désactivé...

Comment il peut être obtenu sans effectuer aucune modification sur le serveur?

source d'informationauteur Victor

  1. 12

    Vous ne pouvez pas utiliser le fichier d'entrée sur Phonegap. Il n'est pas pris en charge. Vous avez besoin de faire quelque chose comme ceci:

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

    Sur getPicture méthode vous permettra de choisir quel est votre fichier source. Voir plus d'infos: http://docs.phonegap.com/en/2.1.0/cordova_file_file.md.html#FileTransfer

    EDIT:

    L'extension de nom de fichier a été nécessaire de spécifier ainsi que le type mime est demandé sur 'text/plain' format pour envoyer l'image sur le format de texte.
    Comme pour les paramètres, si vous n'en avez pas besoin, pourquoi les utiliser?

  2. 0

    Vous ne pouvez pas utiliser le fichier d'entrée sur Phonegap. Il n'est pas pris en charge. Vous avez besoin de faire quelque chose comme ceci:

            <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"]);
        }
      ?>