Comment intégrer le téléchargement de fichiers Ajax dans WordPress

Voulez-vous implémenter le téléchargement de fichiers Ajax dans WordPress ? Parfois, vous devez effectuer une tâche qui télécharge un fichier via Ajax. Dans cet article, nous étudions comment effectuer le téléchargement de fichiers Ajax dans WordPress.

L’un des avantages du téléchargement de fichiers via Ajax est qu’il réduit la charge de votre serveur. Votre page ne se rechargera pas ce qui économise des appels supplémentaires vers un serveur et donc la bande passante. Il ajoute également une meilleure expérience utilisateur sur votre site Web.

Normalement, lorsque nous travaillons avec Ajax, nous appelons l’URL et transmettons des données ou obtenons des données à partir de l’URL spécifiée. WordPress a une manière légèrement différente d’effectuer des opérations Ajax. Dans WordPress, nous appelons l’URL mais le code que nous écrivons pour traiter les données ira dans la fonction. Ensuite, cette fonction doit être mappée avec la valeur ‘action’ transmise dans les paramètres Ajax. Embrouillé? Voyons-le en action.

Téléchargement de fichiers Ajax dans WordPress

Pour commencer, vous avez besoin d’un formulaire avec le fichier d’entrée. Nous donnons un appel Ajax sur la sélection d’un fichier et téléchargeons le fichier sur un serveur. Pour créer un formulaire, ajoutez le code HTML ci-dessous à votre modèle de page.

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

Ensuite, vous devez donner un appel Ajax sur l’événement de modification de l’entrée du fichier. Comme nous transmettons le contenu d’un fichier à l’Ajax, votre code sera légèrement différent du code jQuery standard de WordPress Ajax.

Inclure le fichier JS dans WordPress

Commençons par inclure le fichier JS dans un environnement WordPress. Ce code ira dans un functions.phpfichier ou dans un plugin spécifique au site.

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

Télécharger le fichier sur le serveur

Vous êtes prêt avec le formulaire et le fichier JS. Maintenant, ajoutez le code ci-dessous dans le fichier JS qui enverra le contenu du fichier côté serveur via 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.');
            }
        });
    });    
});

La partie importante du code ci-dessus est que nous ajoutons une action ‘file_upload’ à l’objet form_data. Nous utiliserons cette action ‘file_upload’ pour continuer avec les données du formulaire.

Dans le functions.php, mappez cette action avec l’Ajax comme suit :

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

Si vous écrivez ce code dans un plugin, vous n’avez pas besoin d’écrire une deuxième instruction. Ici, aux ‘wp ajax_’ et ‘wp_ajax_nopriv ‘, nous ajoutons la valeur de l’action qui est ‘file_upload’. Le deuxième paramètre ‘file_upload_callback’ est la méthode de rappel qui aura le code réel pour le téléchargement de fichier.

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

J’utilise une méthode wp_upload_bits pour télécharger un fichier sur un serveur. Cette méthode stocke directement un fichier dans le répertoire wp-content/uploads.

Allez-y et essayez de télécharger un fichier. Votre fichier doit être téléchargé dans le dossier wp-content/uploads/. Notez que vous trouverez votre fichier dans le dossier du mois en cours du répertoire des téléchargements.

Télécharger plusieurs fichiers à l’aide d’Ajax dans WordPress

Jusqu’à présent, nous avons discuté du téléchargement d’un seul fichier via Ajax. Il peut arriver que vous souhaitiez télécharger plusieurs fichiers à l’aide d’Ajax. Voyons comment y parvenir.

Pour télécharger plusieurs fichiers, vous devez apporter de légères modifications au code HTML, JS et PHP ci-dessus.

HTML fournit un attribut « multiple » qui permet à un utilisateur de sélectionner plusieurs fichiers à l’entrée du fichier.

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

En tant qu’utilisateur qui va sélectionner plusieurs fichiers, nous devons modifier le code JavaScript qui parcourt chaque fichier et en construit un tableau.

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

Et enfin, dans la fonction de rappel Ajax, nous parcourons le tableau de fichiers et téléchargeons chaque fichier sur un serveur.

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

J’espère que vous avez entendu parler du téléchargement de fichiers Ajax dans WordPress. J’aimerais entendre vos pensées et suggestions dans la section des commentaires ci-dessous.

Articles Liés

• Comment charger un article WordPress avec AJAX
• Comment utiliser jQuery Ajax dans WordPress
• Glisser-déposer le téléchargement de fichiers à l’aide de JavaScript et PHP