Asynchroner Bild-Upload (Javascript, jQuery)

hamst0r

PC-Selbstbauer(in)
Hallo,
der gezeigte Code führt dazu, dass nicht jedes einzelne Bild hochgeladen wird, sondern das Erste alleine, das zweite erneut mit dem Ersten, das Dritte erneut mit den ersten Beiden usw.
Code:
$(document).ready(function () {
    var input = document.getElementById("images");
    var formdata = false;


    if (window.FormData) {
        formdata = new FormData();
        document.getElementById("btn").style.display = "none";
    }


    if (input.addEventListener) {
        input.addEventListener("change", function (evt) {
            var i = 0, len = this.files.length, img, reader, file;


            for (i = 0; i < len; i++) {
                file = this.files[i];




                if (!!file.type.match(/image.*/)) {
                    if (window.FileReader) {
                        reader = new FileReader();
                        reader.file = file; // Zur asynchronen Übergabe
                        reader.onload = function (e) {
                            file = this.file;
                            preview = e.target.result;
                            if (formdata) {
                                formdata.append("images[]", file);


                                $.ajax({
                                    url: "upload/upload.php",
                                    type: "POST",
                                    xhr: function () {
                                        var myXhr = $.ajaxSettings.xhr();


                                        if (myXhr.upload) {
                                            myXhr.upload.addEventListener("loadstart", function (e) {
                                                // generate unique id for progress bars. This is important because we'll use it on progress event for modifications
                                                this.filename = file.name;
                                                this.progressId = "progress_" + Math.floor((Math.random() * 100000));


                                                showUploadedItem(preview, "img" + this.progressId);
                                                $("#img" + this.progressId).append('<div class="process"><div id="' + this.progressId + '" class="bar" ></div>');
                                            });


                                            myXhr.upload.addEventListener('progress', function (e) {
                                                if (e.lengthComputable) {
                                                    var max = e.total;
                                                    var current = e.loaded;


                                                    var Percentage = (current * 100) / max;
                                                    $("#" + this.progressId).width(Percentage + '%');


                                                    console.log(this.filename + ' ' + Percentage);




                                                    if (Percentage >= 100)
                                                    {
                                                    }
                                                }
                                            }, false);
                                        }
                                        return myXhr;
                                    },
                                    data: formdata,
                                    cache: false,
                                    processData: false,
                                    contentType: false,
                                    success: function (res) {
                                        console.log(res);
                                    }
                                });
                            }
                        };
                        reader.readAsDataURL(file);
                    }


                }
            }


        }, false);
    }
});

Folgende Post Daten kommen im PHP-Skript an:
Code:
admin.php:77 Array
(
    [images] => Array
        (
            [name] => Array
                (
                    [0] => background3.png
                )


            [type] => Array
                (
                    [0] => image/png
                )


            [tmp_name] => Array
                (
                    [0] => E:\Program Files (x86)\xampp\tmp\phpCE46.tmp
                )


            [error] => Array
                (
                    [0] => 0
                )


            [size] => Array
                (
                    [0] => 2106
                )


        )


)
admin.php:77 Array
(
    [images] => Array
        (
            [name] => Array
                (
                    [0] => background3.png
                    [1] => background.jpg
                )


            [type] => Array
                (
                    [0] => image/png
                    [1] => image/jpeg
                )


            [tmp_name] => Array
                (
                    [0] => E:\Program Files (x86)\xampp\tmp\phpCE57.tmp
                    [1] => E:\Program Files (x86)\xampp\tmp\phpCE58.tmp
                )


            [error] => Array
                (
                    [0] => 0
                    [1] => 0
                )


            [size] => Array
                (
                    [0] => 2106
                    [1] => 191119
                )


        )


)


admin.php:77 Array
(
    [images] => Array
        (
            [name] => Array
                (
                    [0] => background3.png
                    [1] => background.jpg
                    [2] => background2.jpg
                )


            [type] => Array
                (
                    [0] => image/png
                    [1] => image/jpeg
                    [2] => image/jpeg
                )


            [tmp_name] => Array
                (
                    [0] => E:\Program Files (x86)\xampp\tmp\phpCE88.tmp
                    [1] => E:\Program Files (x86)\xampp\tmp\phpCE89.tmp
                    [2] => E:\Program Files (x86)\xampp\tmp\phpCE8A.tmp
                )


            [error] => Array
                (
                    [0] => 0
                    [1] => 0
                    [2] => 0
                )


            [size] => Array
                (
                    [0] => 2106
                    [1] => 191119
                    [2] => 255195
                )


        )


)

Ich weiß nicht wie es trotz der Zeilen dazu kommen kann.
Code:
[COLOR=#000000] for (i = 0; i < len; i++) {[COLOR=#000000]    file = this.files[i];
Gruß hamst0r
 
Das liegt an append("images[],file), wodurch du bei jedem Schleifendurchlauf der Post-Variable images[] einen neuen Datensatz hinzufügst.
 
Und wie kann ich das verhindern ohne das PHP-Uploadscript zu verändern? Kann man den Datensatz nach jedem Bild leeren?
 
Code:
Uncaught TypeError: formdata.set is not a function

Und falls ich die Klammern weglasse vermute ich mal, dass ich das PHP Script auch anpassen muss, lieg ich da richtig? Es funktioniert ja momentan mit einem Array.

Bis auf append funktioniert es in Chrome ohne Umwege wohl nicht. Gibt es vielleicht eine Möglichkeit Formdata zurückzusetzen?

[edit]
Ich habe mal die Klammern weggenommen, so scheint es richtig und einzeln übertragen zu werden. Dann werde ich wohl das PHP-Skript anpassen müssen

[edit2]
Funktioniert alles perfekt, danke Dir :daumen:
 
Zuletzt bearbeitet:
Das dürfte wohl der Grund sein, das FormData so selten eingesetzt wird. Es funktioniert noch nicht mit allen Browsern.
 
Zurück