Upload von Bildern mit Phonegap

[Emjay_Lee]

Hallo Liebes Forum,

ich habe derzeit 2 Codeteile.

Eines welches Meine Kamera in meiner Applikation für Android aufruft und eines welches einen Upload vollzieht. Allerdings hatte ich den Upload noch für die Desktop-Version geschrieben. Und nun habe ich Probleme diese zwei Fragment zusammenzuführen.

function dateToString(theDate) {
                var jahr = theDate.getFullYear();
                var monat = theDate.getMonth() + 1;
                var tag = theDate.getDate();
                if (tag < 10)
                    tag = "0" + tag;
                if (monat < 10)
                    monat = "0" + monat;
                return jahr + "-" + monat + "-" + tag;
            }


            
            


            function fileChange() {
                //FileList Objekt aus dem Input Element mit der ID "fileA"
                var fileList = document.getElementById("fileA").files;


                //File Objekt (erstes Element der FileList)
                var file = fileList[0];


                //File Objekt nicht vorhanden = keine Datei ausgewählt oder vom Browser nicht unterstützt
                if (!file)
                    return;


                document.getElementById("fileName").innerHTML = 'Dateiname: ' + file.name;
                document.getElementById("fileSize").innerHTML = 'Dateigr&ouml;&szlig;e: ' + file.size + ' B';
                document.getElementById("fileType").innerHTML = 'Dateityp: ' + file.type;
                document.getElementById("progress").value = 0;
                document.getElementById("prozent").innerHTML = "0%";
            }


            
            


            function uploadFile() {


                //var auswahl = $("#auswahl").val();
                var aktuell = dateToString(current);
                //Wieder unser File Objekt
                var file = document.getElementById("fileA").files[0];
                //FormData Objekt erzeugen
                var formData = new FormData();
                //XMLHttpRequest Objekt erzeugen
                var client = new XMLHttpRequest();
                var prog = document.getElementById("progress");


                if (!file)
                    return;


                prog.value = 0;
                prog.max = file.size;


                //Fügt dem formData Objekt unser File Objekt hinzu
                formData.append("datei", file);
                //formData.append("auswahl",  );
                client.onerror = function(e) {
                    alert("onError");
                };


                client.onload = function(e) {
                    document.getElementById("prozent").innerHTML = "100%";
                    prog.value = prog.max;
                };


                client.upload.onprogress = function(e) {
                    document.getElementById("progress").value = e.loaded;
                    document.getElementById("prozent").innerHTML = Math.round(100 / e.total * e.loaded) + "%";
                };


                client.open("POST", "upload.php?auswahl=" + auswahl + "&aktuell=" + aktuell);
                client.send(formData);


            }

Hier werden die Details der Datei mit fileChange ausgelesen und nachdem drücken des Upload Buttons mit der Funktion uploadFile() hochgeladen. Diese ruft eine PHP Datei auf, welche wiederum die Datei umbenennt und in den richtigen Ordner lädt.

Hier ist der dazugehörgige HTML Teil

<form action="" method="post" enctype="multipart/form-data">                    <input name="file" type="file" id="fileA" onchange="fileChange();" class="file"/>
                    <progress id="progress"></progress><span id="prozent"></span>
                    <input name="upload" id="upper" value="Upload" type="button" data-inline="true" onclick="uploadFile();"  />
                </form>

Ich denke der Code erklärt sich von selbst.

Jetzt habe ich hier noch die Kamerafunktion, welche den ersten input-Teil des obrigen <form> Tags ersetzen soll.

            var pictureSource;            var destinationType;


            document.addEventListener("deviceready", onDeviceReady, false);


            function onDeviceReady() {


                pictureSource = navigator.camera.PictureSourceType;
                destinationType = navigator.camera.DestinationType;


            }
            
            
            
            $(document).on('click', '#snap', function() {
                // Take picture using device camera and retrieve image as base64-encoded string
                
                
                navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
                    quality : 50,
                    destinationType : destinationType.DATA_URL
                });
            });


            function onPhotoDataSuccess(imageData) {
                // Uncomment to view the base64 encoded image data
                // console.log(imageData);


                // Get image handle


                var smallImage = document.getElementById('smallImage');


                // Unhide image elements


                smallImage.style.display = 'block';


                // Show the captured photo
                // The inline CSS rules are used to resize the image


                smallImage.src = "data:image/jpeg;base64," + imageData;
            }


            function onPhotoURISuccess(imageURI) {
                // Uncomment to view the image file URI
                // console.log(imageURI);


                // Get image handle
                //
                var largeImage = document.getElementById('largeImage');


                // Unhide image elements
                //
                largeImage.style.display = 'block';


                // Show the captured photo
                // The inline CSS rules are used to resize the image
                //
                largeImage.src = imageURI;
            }


            function onFail(message) {
                alert('Failed because: ' + message);
            }

Habe einfach versucht den Kamera-Aufruf mit $(document).on('click', '#snap', function() { .... }); zu gestalten was auch funktioniert aber leider funktioniert das onchange="fileChange" nicht mehr richtig.

Wie kann man das ganze hier lösen? Kann man da zb. auch das HTML Formular weglassen und via client.open("POST" .....) die Daten senden? WICHTIG IST DASS DIE VARIABLEN aktuell UND auswahl AUCH VIA URL IN DIE PHP GELANGEN.

EDIT: Vielleicht ist es noch erwähnenswert, dass ich mit jQuery arbeite.

Danke für jede Antwort.

Emjay