Dualer Dateiupload

Marco-P

Erfahrenes Mitglied
Servus an alle,

ich stehe nach langem mal wieder vor einem Problem. Das so eigentlich keins ist, weil es dazu auch jedemenge Stoff gibt den ich über Google usw. auch finde aber das richtige ist jetzt doch nicht dabei.

Ich brauche ein Script um zwei Dateien hochzuladen. Habe ein Formular erstellt mit zwei auswahlfeldern für die jeweiligen Dateien. Das eine ist eine *.spf Datei das andere eine log.zip Datei.
Zusätzlich gibt es noch zwei textfelder die der User frei mit Text füllen kann.

Javascript:
    window.onload = function () {
            document.getElementById("progress").value = 0;           
    }
    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öße: ' + file.size + ' B';
        document.getElementById("fileType").innerHTML = 'Dateitype: ' + file.type;
        document.getElementById("progress").value = 0;
        document.getElementById("prozent").innerHTML = "0%";
    }   
   
    var client = null;
    
    function uploadFile()
    {
        //Wieder unser File Objekt
        var file = document.getElementById("fileA").files[0];
        //FormData Objekt erzeugen
        var formData = new FormData();
        //XMLHttpRequest Objekt erzeugen
        client = new XMLHttpRequest();
    
        var prog = document.getElementById("progress");
    
        if(!file)
            return;
    
        prog.value = 0;
        prog.max = 100;
    
        //Fügt dem formData Objekt unser File Objekt hinzu
        formData.append("datei", file);
    
        client.onerror = function(e) {
            alert("onError");
        };
    
        client.onload = function(e) {
            document.getElementById("prozent").innerHTML = "100%";
            prog.value = prog.max;
        };
    
        client.upload.onprogress = function(e) {
            var p = Math.round(100 / e.total * e.loaded);
            document.getElementById("progress").value = p;           
            document.getElementById("prozent").innerHTML = p + "%";
        };
    
        client.onabort = function(e) {
            alert("Upload abgebrochen");
        };
    
        client.open("POST", "modul/ajax/upload.php");
        client.send(formData);
    }
   
    function uploadAbort() {
        if(client instanceof XMLHttpRequest)
            //Briecht die aktuelle Übertragung ab
            client.abort();
    }

Diesen Code habe ich verwendet allerdings kann ich damit ja nicht beide Felder ansprechen.

Hat vielleicht jemand noch einen CodeSchnipsel in seiner Schublade liegen den er mir überlassen würde.
Momentan stehe ich auch echt auf dem schlauch.

Freue mich schon auf all die Antworten die mich weiterbingen.
Vielen Dank schon einmal im vorraus.

Gruß Marco
 
Super, danke für die schnelle Antwort.

Das script funktioniert einwandfrei.
Kannst du mir vielleicht auch sagen wie ich die Menge der Dateien auf zwei begrenzen kann?
Und wie ich die beiden Dateinamen in versteckte inputfelder einfüge.

Da ich ja die Dateinamen in einer Datenbank speichern möchte.

Gruß Marco
 

Neue Beiträge

Zurück