So integrieren Sie den Ajax-Datei-Upload in WordPress

Last updated 18. Oktober 2021

Inhalt

Hochladen mehrerer Dateien mit Ajax in WordPress

Möchten Sie den Ajax-Datei-Upload in WordPress implementieren? Manchmal müssen Sie eine Aufgabe ausführen, die eine Datei über Ajax hochlädt. In diesem Artikel lernen wir, wie man Ajax-Dateien in WordPress hochlädt.

Ein Vorteil beim Hochladen von Dateien über Ajax besteht darin, dass die Serverlast reduziert wird. Ihre Seite wird nicht neu geladen, was zusätzliche Aufrufe zu einem Server und damit die Bandbreite spart. Es fügt auch eine bessere Benutzererfahrung auf Ihrer Website hinzu.

Normalerweise rufen wir bei der Arbeit mit Ajax URL auf und übergeben Daten an die angegebene URL oder rufen Daten von dieser ab. WordPress hat eine etwas andere Möglichkeit, Ajax-Operationen auszuführen. In WordPress rufen wir die URL auf, aber der Code, den wir schreiben, um die Daten zu verarbeiten, wird in die Funktion aufgenommen. Dann muss diese Funktion dem in Ajax-Parametern übergebenen ‘action’-Wert zugeordnet werden. Verwirrt? Sehen wir es in Aktion.

Ajax-Datei-Upload in WordPress

Für den Einstieg benötigen Sie ein Formular mit der Dateieingabe. Wir geben bei der Auswahl einer Datei einen Ajax-Aufruf und laden die Datei auf einen Server hoch. Um ein Formular zu erstellen, fügen Sie den folgenden HTML-Code zu Ihrer Seitenvorlage hinzu.

<form class="fileUpload" enctype="multipart/form-data">
    <div class="form-group">
        <label><?php _e('Choose File:'); ?></label>
        <input type="file" id="file" accept="image/*" />
    </div>
</form>

Als nächstes müssen Sie einen Ajax-Aufruf für das Änderungsereignis der Dateieingabe ausführen. Da wir einen Dateiinhalt an Ajax übergeben, unterscheidet sich Ihr Code geringfügig vom regulären jQuery-Code von WordPress Ajax.

JS-Datei in WordPress einbinden

Lassen Sie uns zuerst die JS-Datei in eine WordPress-Umgebung einbinden. Dieser Code wird functions.phpin eine Datei oder in ein Site-spezifisches Plugin eingefügt.

function aw_scripts() {
    // Register the script
    wp_register_script( 'aw-custom', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), '1.1', true );
 
    // Localize the script with new data
    $script_data_array = array(
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
    );
    wp_localize_script( 'aw-custom', 'aw', $script_data_array );
 
    // Enqueued script with localized data.
    wp_enqueue_script( 'aw-custom' );
}
 
add_action( 'wp_enqueue_scripts', 'aw_scripts' );

Datei auf Server hochladen

Sie sind mit dem Formular und der JS-Datei fertig. Fügen Sie nun den folgenden Code in die JS-Datei ein, die den Dateiinhalt über Ajax an die Serverseite sendet.

custom.js

jQuery(function($) {
    $('body').on('change', '#file', function() {
        $this = $(this);
        file_data = $(this).prop('files')[0];
        form_data = new FormData();
        form_data.append('file', file_data);
        form_data.append('action', 'file_upload');
 
        $.ajax({
            url: aw.ajaxurl,
            type: 'POST',
            contentType: false,
            processData: false,
            data: form_data,
            success: function (response) {
                $this.val('');
                alert('File uploaded successfully.');
            }
        });
    });    
});

Der wichtige Teil des obigen Codes ist, dass wir eine Aktion ‘file_upload’ an das form_data-Objekt anhängen. Wir verwenden diese ‘file_upload’-Aktion, um mit den Formulardaten fortzufahren.

In dem functions.php, Karte, diese Aktion mit dem Ajax wie folgt:

add_action( 'wp_ajax_file_upload', 'file_upload_callback' );
add_action( 'wp_ajax_nopriv_file_upload', 'file_upload_callback' );

Wenn Sie diesen Code in einem Plugin schreiben, müssen Sie keine zweite Anweisung schreiben. Hier fügen wir an ‘wp ajax_’ und ‘wp_ajax_nopriv ‘ den Aktionswert an, der ‘file_upload’ ist. Der zweite Parameter ‘file_upload_callback’ ist die Callback-Methode, die den eigentlichen Code zum Hochladen von Dateien enthält.

function file_upload_callback() {
       $arr_img_ext = array('image/png', 'image/jpeg', 'image/jpg', 'image/gif');
    if (in_array($_FILES['file']['type'], $arr_img_ext)) {
        $upload = wp_upload_bits($_FILES["file"]["name"], null, file_get_contents($_FILES["file"]["tmp_name"]));
        //$upload['url'] will gives you uploaded file path
    }
    wp_die();
}

Ich verwende eine wp_upload_bits- Methode zum Hochladen von Dateien auf einen Server. Diese Methode speichert eine Datei direkt im Verzeichnis wp-content/uploads.

Fahren Sie fort und versuchen Sie, eine Datei hochzuladen. Ihre Datei sollte in den Ordner wp-content/uploads/ hochgeladen werden. Beachten Sie, dass Sie Ihre Datei im aktuellen Monatsordner des Uploads-Verzeichnisses finden.

Hochladen mehrerer Dateien mit Ajax in WordPress

Bisher haben wir das Hochladen einer einzelnen Datei über Ajax besprochen. Es kann vorkommen, dass Sie mehrere Dateien mit Ajax hochladen möchten. Mal sehen, wie man es erreicht.

Um mehrere Dateien hochzuladen, müssen Sie den obigen HTML-, JS- und PHP-Code geringfügig ändern.

HTML bietet ein ‘multiple’-Attribut, das es einem Benutzer ermöglicht, mehrere Dateien bei der Dateieingabe auszuwählen.

HTML Quelltext

<form class="fileUpload" enctype="multipart/form-data">
    <div class="form-group">
        <label><?php _e('Choose File:'); ?></label>
        <input type="file" id="file" accept="image/*" multiple />
    </div>
</form>

Als Benutzer, der mehrere Dateien auswählen möchte, müssen wir den JavaScript-Code ändern, der jede Datei durchläuft und daraus ein Array erstellt.

custom.js

jQuery(function($) {
    $('body').on('change', '#file', function() {
        $this = $(this);
        file_obj = $this.prop('files');
        form_data = new FormData();
        for(i=0; i<file_obj.length; i++) {
            form_data.append('file[]', file_obj[i]);
        }
        form_data.append('action', 'file_upload');
 
        $.ajax({
            url: aw.ajaxurl,
            type: 'POST',
            contentType: false,
            processData: false,
            data: form_data,
            success: function (response) {
                $this.val('');
                alert('File(s) uploaded successfully.');
            }
        });
    });
});

Und schließlich durchlaufen wir in der Ajax-Callback-Funktion das Dateiarray und laden jede Datei auf einen Server hoch.

function file_upload_callback() {
    $arr_img_ext = array('image/png', 'image/jpeg', 'image/jpg', 'image/gif');
 
    for($i = 0; $i < count($_FILES['file']['name']); $i++) {
 
        if (in_array($_FILES['file']['type'][$i], $arr_img_ext)) {
 
            $upload = wp_upload_bits($_FILES['file']['name'][$i], null, file_get_contents($_FILES['file']['tmp_name'][$i]));
            //$upload['url'] will gives you uploaded file path
        }
    }
    wp_die();
}

Ich hoffe, Sie haben den Ajax-Datei-Upload in WordPress kennengelernt. Ich würde gerne Ihre Gedanken und Vorschläge im Kommentarbereich unten hören.

Zum Thema passende Artikel

Aufnahmequelle: artisansweb.net