So laden Sie Asynchron -Dateien mithilfe von HTML5 und AJAX hoch

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:

<code class="language-html"><fieldset>
<legend>HTML文件上传</legend>
<div> <label for="fileselect">要上传的文件：</label> <div>或在此处拖放文件</div>
</div>
<div>上传文件</div>
</fieldset></code>

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 ():

<code class="language-javascript">// 文件选择
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);
    }

}</code>

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:

<code class="language-javascript">// 上传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);

    }

}</code>

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:

<code class="language-php"><?php $fn = (isset($_SERVER['HTTP_X_FILENAME']) ? $_SERVER['HTTP_X_FILENAME'] : false); ?></code>

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:

<code class="language-php">if ($fn) {

    // AJAX调用
    file_put_contents(
        'uploads/' . $fn,
        file_get_contents('php://input')
    );
    echo "$fn 上传成功";
    exit();

}</code>

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

<code class="language-html"><fieldset>
<legend>HTML文件上传</legend>
<div> <label for="fileselect">要上传的文件：</label> <div>或在此处拖放文件</div>
</div>
<div>上传文件</div>
</fieldset></code>

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!