Jak zintegrować przesyłanie plików Ajax z WordPress

Ostatnia aktualizacja paź 18, 2021

Zadowolony

Prześlij wiele plików za pomocą Ajax w WordPress

Czy chcesz zaimplementować przesyłanie plików Ajax w WordPress? Czasami musisz wykonać zadanie, które przesyła plik przez Ajax. W tym artykule dowiemy się, jak przesyłać pliki Ajax w WordPress.

Zaletą przesyłania plików przez Ajax jest zmniejszenie obciążenia serwera. Twoja strona nie przeładuje się, co oszczędza dodatkowe połączenia z serwerem, a tym samym przepustowość. Zapewnia również lepsze wrażenia użytkownika w Twojej witrynie.

Zwykle podczas pracy z Ajaxem wywołujemy adres URL i przekazujemy dane do lub pobieramy dane z określonego adresu URL. WordPress ma nieco inny sposób wykonywania operacji Ajax. W WordPressie wywołujemy adres URL, ale kod, który piszemy, aby przetworzyć dane, trafi do funkcji. Następnie ta funkcja musi mapować z wartością ‘action’ przekazaną w parametrach Ajax. Zmieszany? Zobaczmy to w akcji.

Przesyłanie plików Ajax w WordPress

Aby rozpocząć, potrzebujesz formularza z danymi wejściowymi pliku. Wykonujemy wywołanie Ajax przy wyborze pliku i przesyłamy plik na serwer. Aby utworzyć formularz, dodaj poniższy kod HTML do szablonu strony.

<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>

Następnie musisz wywołać Ajax na zdarzeniu zmiany wejścia pliku. Ponieważ przekazujemy zawartość pliku do Ajax, Twój kod będzie nieco inny niż zwykły kod jQuery w WordPress Ajax.

Dołącz plik JS do WordPress

Najpierw dołączmy plik JS do środowiska WordPress. Ten kod zostanie umieszczony w functions.phppliku lub we wtyczce specyficznej dla witryny.

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' );

Prześlij plik na serwer

Jesteś gotowy z formularzem i plikiem JS. Teraz dodaj poniższy kod w pliku JS, który wyśle zawartość pliku po stronie serwera przez Ajax.

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.');
            }
        });
    });    
});

Ważną częścią powyższego kodu jest dodanie akcji ‘file_upload’ do obiektu form_data. Użyjemy tej akcji ‘file_upload’, aby kontynuować z danymi formularza.

W functions.php, zmapuj tę akcję z Ajaxem w następujący sposób:

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

Jeśli piszesz ten kod we wtyczce, nie musisz pisać drugiej instrukcji. Tutaj do ‘wp ajax_’ i ‘wp_ajax_nopriv ‘ dołączamy wartość akcji, którą jest ‘file_upload’. Drugi parametr ‘file_upload_callback’ to metoda wywołania zwrotnego, która będzie zawierała rzeczywisty kod do przesyłania plików.

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();
}

Używam wp_upload_bits metodę przesyłania pliku na serwerze. Ta metoda bezpośrednio przechowuje plik w katalogu wp-content/uploads.

Śmiało i spróbuj przesłać plik. Twój plik powinien zostać przesłany do folderu wp-content/uploads/. Pamiętaj, że plik znajdzie się w folderze bieżącego miesiąca w katalogu przesyłania.

Prześlij wiele plików za pomocą Ajax w WordPress

Do tej pory omawialiśmy przesyłanie pojedynczego pliku przez Ajax. Może zaistnieć sytuacja, gdy chcesz przesłać wiele plików za pomocą Ajax. Zobaczmy, jak to osiągnąć.

Aby przesłać wiele plików, musisz wprowadzić niewielkie zmiany w powyższym kodzie HTML, JS i PHP.

HTML zapewnia atrybut „wiele", który pozwala użytkownikowi wybrać wiele plików podczas wprowadzania pliku.

Kod HTML

<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>

Jako użytkownik zamierzający wybrać wiele plików, musimy zmienić kod JavaScript, który przechodzi przez każdy plik i buduje z niego tablicę.

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.');
            }
        });
    });
});

I na koniec, w funkcji zwrotnej Ajax, przechodzimy przez tablicę plików i przesyłamy każdy plik na serwer.

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();
}

Mam nadzieję, że dowiedziałeś się o przesyłaniu plików Ajax do WordPressa. Chciałbym usłyszeć wasze przemyślenia i sugestie w sekcji komentarzy poniżej.

Powiązane artykuły

Źródło nagrywania: artisansweb.net