Wie Datei hochladen mit Phonegap und JqueryMobile?

Baue ich eine mobile app für Android-mit JQM und PhoneGap.
Ich muss eine Datei hochladen (Bild) auf den remote server (aus der Galerie oder nehmen Sie ein Bild mit Kamera).
Im Prinzip es getan werden kann mithilfe der phonegap file-API, das problem ist, dass der server geschrieben wurde, zur Unterstützung der einfachen POST-übermittlung.

Was ich brauche, ist zu "simulieren" in meiner app-Anforderung genaue wie wäre es geschickt, aus dem folgenden html-Formular.
Dazu brauche ich, um die server-Antwort.

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

Wollte ich mit phonegap file-API, sondern die Struktur der abgerufenen Daten auf der server-Seite ist anders als es sein sollte.

Habe ich versucht zu implementieren, die form in meiner app, aber der button "Datei wählen" deaktiviert war...

Wie Sie erreicht werden kann, ohne dass änderungen auf der server-Seite?

InformationsquelleAutor der Frage Victor | 2012-12-13

  1. 12

    Können Sie nicht verwenden-input-Datei auf Phonegap. Es ist nicht unterstützt. Sie brauchen so etwas wie dieses:

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

    Auf getPicture-Methode Sie wählen, was Sie Ihre Datei Quelle. Siehe mehr info: http://docs.phonegap.com/en/2.1.0/cordova_file_file.md.html#FileTransfer

    EDIT:

    Der Dateinamen-Erweiterung war nötig, anzugeben, sowie der angeforderte mimeType auf 'text/plain' - format zu senden, Bild im text-format.
    Für die params -, wenn Sie diese nicht brauchen, warum verwenden Sie Sie?

    InformationsquelleAutor der Antwort A. Magalhães

  2. 0

    Können Sie nicht verwenden-input-Datei auf Phonegap. Es ist nicht unterstützt. Sie brauchen so etwas wie dieses:

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

    InformationsquelleAutor der Antwort Rakesh Samal

Schreibe einen Kommentar