Kernpunkte

• asynchronen Dateien mithilfe von HTML5 und AJAX k?nnen im Hintergrund erfolgen, sodass Benutzer w?hrend des Hochladens andere Aufgaben auf der Seite ausführen k?nnen. Bei diesem Prozess werden HTML -Formulare zum Hochladen von Dateien auf PHP -Seiten erstellt, und JavaScript stellt sicher, dass nur JPG -Bilder mit weniger als 300.000 Bytes hochgeladen werden.
• Die JavaScript -Upload -Funktion erfordert ein XMLHTTPREQUEST2 -Objekt (in Firefox und Chrome verfügbar). Die .open () -Methode von XMLHTTPREQUEST wird so eingestellt, dass die Daten auf der PHP -Seite ver?ffentlichen, den HTTP -Header auf den Namen der Datei festgelegt und das Dateiobjekt an die .send () -Methode übergeben werden.
• PHP -Datei überprüft den HTTP -Header X_FileName, um zwischen AJAX -Anforderungen und Standardformularpost zu unterscheiden. Wenn der Dateiname festgelegt ist, ruft PHP die ver?ffentlichten Daten ab und gibt sie in einer neuen Datei im Ordner "Uploads" aus. Standard-HTML-Multipart/Form-Daten-Post wird unter Verwendung der üblichen Funktion des PHP $ _file behandelt.

In früheren Artikeln haben wir gelernt, wie man HTML5 verwendet, um Dateien zu ziehen, und wie Sie Dateien mithilfe von HTML5 und JavaScript ge?ffnet haben. Jetzt haben wir einen gültigen Satz von Dateien, mit denen jede Datei auf den Server hochgeladen werden kann. Dieser Vorgang erfolgt im Hintergrund asynchron, sodass Benutzer im Laufe des Prozesses andere Aufgaben auf der Seite ausführen k?nnen.

html

Lassen Sie uns unser HTML -Formular erneut überprüfen:

<fieldset><legend>HTML文件上傳</legend><div> <label for="fileselect">要上傳的文件：</label> <div>或在此處拖放文件</div></div><div>上傳文件</div></fieldset>

Wir laden die Datei auf die PHP -Seite hochladen.php hoch. Wenn der Benutzer auf "Datei hochladen" klickt, verarbeitet die Seite AJAX -Upload -Anforderungen und Standardformular -Posts. Unser JavaScript stellt sicher, dass nur JPG -Bilder mit weniger als 300.000 Bytes hochgeladen werden (der in max_file_size angegebene Wert).

JavaScript

Zun?chst müssen wir der Funktion "DateiSelectHandhandler () eine Zeile hinzufügen, die beim Ausw?hlen oder Ziehen und Ablegen einer oder mehrere Dateien aufgerufen wird. In unserer Dateischleife werden wir eine andere Funktion aufrufen - UploadFile ():

// 文件選擇
function FileSelectHandler(e) {

    // 取消事件和懸停樣式
    FileDragHover(e);

    // 獲取FileList對象
    var files = e.target.files || e.dataTransfer.files;

    // 處理所有File對象
    for (var i = 0, f; f = files[i]; i++) {
        ParseFile(f);
        UploadFile(f);
    }

}

Datei -Upload erfordert ein XMLHTTPrequest2 -Objekt, das derzeit in Firefox und Chrome verfügbar ist. Bevor wir den AJAX -Aufruf t?tigen, stellen wir sicher, dass die .Upload () -Methode verfügbar ist und wir haben eine JPG mit einer Dateigr??e, die kleiner als der Formular MAX_FILE_SIZE ist:

// 上傳JPEG文件
function UploadFile(file) {

    var xhr = new XMLHttpRequest();
    if (xhr.upload && file.type == "image/jpeg" && file.size < $id("MAX_FILE_SIZE").value) {

        // 開始上傳
        xhr.open("POST", $id("upload").action, true);
        xhr.setRequestHeader("X_FILENAME", file.name);
        xhr.send(file);

    }

}

Die .open () -Methode von xmlHttprequest wird so eingestellt, dass die Daten in Upload.php (die Aktionseigenschaft unseres Upload -Formulars) ver?ffentlichen. Zus?tzlich setzen wir den HTTP -Header auf den Namen der Datei und übergeben das Dateiobjekt an die Methode .send ().

php

Unsere PHP -Datei upload.php überprüft nun den HTTP -Header x_filename, um zwischen AJAX -Anforderungen und Standardformularposten zu unterscheiden:

<?php $fn = (isset($_SERVER['HTTP_X_FILENAME']) ? $_SERVER['HTTP_X_FILENAME'] : false); ?>

Wenn der Dateiname festgelegt ist, kann PHP ver?ffentlichte Daten abrufen und in einer neuen Datei im Ordner "Uploads" ausgeben. überraschenderweise kann dies mit einer einzigen Codezeile erreicht werden:

if ($fn) {

    // AJAX調(diào)用
    file_put_contents(
        'uploads/' . $fn,
        file_get_contents('php://input')
    );
    echo "$fn 上傳成功";
    exit();

}

Der Standard-HTML-Multipart/Form-Daten-Beitrag kann mit der üblichen Funktion von PHP $ _file behandelt werden:

<fieldset><legend>HTML文件上傳</legend><div> <label for="fileselect">要上傳的文件：</label> <div>或在此處拖放文件</div></div><div>上傳文件</div></fieldset>

Sie k?nnen die Demo -Seite anzeigen, beachten Sie jedoch, dass sie auf Servern ohne PHP -Unterstützung gehostet wird und Uploads nicht stattfinden. Laden Sie also die Datei herunter, um den Code zu überprüfen und auf Ihrem eigenen PHP -Server zu installieren.

Der obige Code funktioniert, aber der Benutzer wei? nicht, ob das Upload des Datei -Uploads gestartet, abgeschlossen oder fehlgeschlagen ist. Sie müssen die letzte Ausgabe dieser Serie lesen: So erstellen Sie eine Datei -Upload -Fortschrittsleiste in HTML5 und JavaScript …

FAQ (FAQ) über HTML5 AJAX -Datei Upload

(Der FAQ-Teil wird hier weggelassen, weil dieser Teil nichts mit pseudoorientierten Zielen zu tun hat und l?nger ist. Es ist in Ordnung, FAQs zu behalten, aber die Sprache muss neu organisiert werden, um es mit dem Gesamtstil des Gesamtstils zu vereinfachen Artikel.)

Das obige ist der detaillierte Inhalt vonSo laden Sie Asynchron -Dateien mithilfe von HTML5 und AJAX hoch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!