Fortschritt beim Hochladen von jQuery und Hochladen von AJAX-Dateien

Es scheint, als hätte ich mein Problem nicht klar kommuniziert. Ich muss eine Datei senden (mit AJAX) und den Upload-Fortschritt der Datei mit dem Nginx HttpUploadProgressModule abrufen . Ich brauche eine gute Lösung für dieses Problem. Ich habe es mit dem Plugin jquery.uploadprogress versucht, aber ich muss viel davon neu schreiben, damit es in allen Browsern funktioniert und die Datei mit AJAX gesendet wird.

Ich brauche dazu nur den Code, der in allen gängigen Browsern (Chrome, Safari, FireFox und IE) funktioniert. Es wäre sogar noch besser, wenn ich eine Lösung finden könnte, die mehrere Datei-Uploads unterstützt.

Ich verwende das Plugin jquery.uploadprogress , um den Upload-Fortschritt einer Datei aus dem NginxHttpUploadProgressModule abzurufen. Dies befindet sich in einem Iframe für eine Facebook-Anwendung. Es funktioniert in Firefox, aber es schlägt in Chrome / Safari fehl.

Wenn ich die Konsole öffne, bekomme ich das.

Uncaught ReferenceError: progressFrame is not defined
jquery.uploadprogress.js:80

Irgendeine Idee, wie ich das beheben würde?

Ich möchte die Datei auch mit AJAX senden, wenn sie fertig ist. Wie würde ich das umsetzen?

EDIT:
Ich brauche das bald und es ist wichtig, also werde ich ein 100-Punkte-Kopfgeld auf diese Frage setzen. Die erste Person, die darauf antwortet, erhält die 100 Punkte.

EDIT 2:
Jake33 hat mir geholfen, das erste Problem zu lösen. Die erste Person, die eine Antwort zum Senden der Datei mit Ajax hinterlässt, erhält die 100 Punkte.

Das Hochladen von Dateien ist heutzutage mit AJAX tatsächlich möglich. Ja, AJAX, nicht irgendwelche beschissenen AJAX-Möchtegern wie swf oder java.

Dieses Beispiel könnte Ihnen helfen: https://webblocks.nl/tests/ajax/file-drag-drop.html

(Es enthält auch die Drag & Drop-Oberfläche, die jedoch leicht ignoriert werden kann.)

Grundsätzlich kommt es darauf an:

<input id="files" type="file" />

<script>
document.getElementById('files').addEventListener('change', function(e) {
    var file = this.files[0];
    var xhr = new XMLHttpRequest();
    (xhr.upload || xhr).addEventListener('progress', function(e) {
        var done = e.position || e.loaded
        var total = e.totalSize || e.total;
        console.log('xhr progress: ' + Math.round(done/total*100) + '%');
    });
    xhr.addEventListener('load', function(e) {
        console.log('xhr upload complete', e, this.responseText);
    });
    xhr.open('post', '/URL-HERE', true);
    xhr.send(file);
});
</script>

(Demo: http://jsfiddle.net/rudiedirkx/jzxmro8r/ )

Im Grunde kommt es also darauf an =)

xhr.send(file);

Wo fileist der Typ Blob: http://www.w3.org/TR/FileAPI/

Eine andere (bessere IMO) Möglichkeit ist die Verwendung FormData. Auf diese Weise können Sie 1) eine Datei wie in einem Formular benennen und 2) andere Inhalte (auch Dateien) wie in einem Formular senden.

var fd = new FormData;
fd.append('photo1', file);
fd.append('photo2', file2);
fd.append('other_data', 'foo bar');
xhr.send(fd);

FormData macht den Servercode sauberer und abwärtskompatibler (da die Anforderung jetzt genau das gleiche Format wie normale Formulare hat).

Alles ist nicht experimentell, aber sehr modern. Chrome 8+ und Firefox 4+ wissen, was zu tun ist, aber ich kenne keine anderen.

So habe ich die Anfrage (1 Bild pro Anfrage) in PHP behandelt:

if ( isset($_FILES['file']) ) {
    $filename = basename($_FILES['file']['name']);
    $error = true;

    // Only upload if on my home win dev machine
    if ( isset($_SERVER['WINDIR']) ) {
        $path = 'uploads/'.$filename;
        $error = !move_uploaded_file($_FILES['file']['tmp_name'], $path);
    }

    $rsp = array(
        'error' => $error, // Used in JS
        'filename' => $filename,
        'filepath' => '/tests/uploads/' . $filename, // Web accessible
    );
    echo json_encode($rsp);
    exit;
}

Hier sind einige Optionen für die Verwendung von AJAX zum Hochladen von Dateien:

• AjaxFileUpload - Erfordert ein Formularelement auf der Seite, lädt die Datei jedoch hoch , ohne die Seite neu zu laden . Siehe die Demo .

• Liste der mit "Datei" gekennzeichneten JQuery-Plug-Ins

• Uploadify - Eine Flash-basierte Methode zum Hochladen von Dateien.

• Wie kann ich Dateien asynchron hochladen?

• Zehn Beispiele für das Hochladen von AJAX-Dateien - Dies wurde in diesem Jahr veröffentlicht.

UPDATE: Hier ist ein JQuery-Plug-In zum Hochladen mehrerer Dateien .