{"id":24893,"date":"2021-05-27T14:33:00","date_gmt":"2021-05-27T11:33:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24893"},"modified":"2021-10-18T02:13:13","modified_gmt":"2021-10-17T23:13:13","slug":"comment-integrer-le-telechargement-de-fichiers-ajax-dans-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-integrer-le-telechargement-de-fichiers-ajax-dans-wordpress\/","title":{"rendered":"Comment int\u00e9grer le t\u00e9l\u00e9chargement de fichiers Ajax dans WordPress"},"content":{"rendered":"

Voulez-vous impl\u00e9menter le t\u00e9l\u00e9chargement de fichiers Ajax dans WordPress\u00a0? Parfois, vous devez effectuer une t\u00e2che qui t\u00e9l\u00e9charge un fichier via Ajax. Dans cet article, nous \u00e9tudions comment effectuer le t\u00e9l\u00e9chargement de fichiers Ajax dans WordPress.<\/p>\n

L’un des avantages du t\u00e9l\u00e9chargement de fichiers via Ajax est qu’il r\u00e9duit la charge de votre serveur. Votre page ne se rechargera pas ce qui \u00e9conomise des appels suppl\u00e9mentaires vers un serveur et donc la bande passante. Il ajoute \u00e9galement une meilleure exp\u00e9rience utilisateur sur votre site Web.<\/p>\n

Normalement, lorsque nous travaillons avec Ajax, nous appelons l’URL et transmettons des donn\u00e9es ou obtenons des donn\u00e9es \u00e0 partir de l’URL sp\u00e9cifi\u00e9e. WordPress a une mani\u00e8re l\u00e9g\u00e8rement diff\u00e9rente d’effectuer des op\u00e9rations Ajax. Dans WordPress, nous appelons l’URL mais le code que nous \u00e9crivons pour traiter les donn\u00e9es ira dans la fonction. Ensuite, cette fonction doit \u00eatre mapp\u00e9e avec la valeur ‘action’ transmise dans les param\u00e8tres Ajax. Embrouill\u00e9? Voyons-le en action.<\/p>\n

T\u00e9l\u00e9chargement de fichiers Ajax dans WordPress<\/h3>\n

Pour commencer, vous avez besoin d’un formulaire avec le fichier d’entr\u00e9e. Nous donnons un appel Ajax sur la s\u00e9lection d’un fichier et t\u00e9l\u00e9chargeons le fichier sur un serveur. Pour cr\u00e9er un formulaire, ajoutez le code HTML ci-dessous \u00e0 votre mod\u00e8le de page.<\/p>\n

<form class=\"fileUpload\" enctype=\"multipart\/form-data\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label><?php _e('Choose File:'); ?><\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"file\" id=\"file\" accept=\"image\/*\" \/>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n<\/form><\/code><\/pre>\n
Ensuite, vous devez donner un appel Ajax sur l’\u00e9v\u00e9nement de modification de l’entr\u00e9e du fichier. Comme nous transmettons le contenu d’un fichier \u00e0 l’Ajax, votre code sera l\u00e9g\u00e8rement diff\u00e9rent du code jQuery standard de WordPress Ajax<\/a>.<\/p>\n
Inclure le fichier JS dans WordPress<\/h4>\n
Commen\u00e7ons par inclure le fichier JS dans un environnement WordPress. Ce code ira dans un functions.php<\/code>fichier ou dans un plugin sp\u00e9cifique au site.<\/p>\n
function aw_scripts() {\n\u00a0\u00a0\u00a0\u00a0\/\/ Register the script\n\u00a0\u00a0\u00a0\u00a0wp_register_script( 'aw-custom', get_stylesheet_directory_uri(). '\/js\/custom.js', array('jquery'), '1.1', true );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Localize the script with new data\n\u00a0\u00a0\u00a0\u00a0$script_data_array = array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'ajaxurl' => admin_url( 'admin-ajax.php' ),\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\u00a0\u00a0\u00a0wp_localize_script( 'aw-custom', 'aw', $script_data_array );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Enqueued script with localized data.\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_script( 'aw-custom' );\n}\n\u00a0\nadd_action( 'wp_enqueue_scripts', 'aw_scripts' );<\/code><\/pre>\n
T\u00e9l\u00e9charger le fichier sur le serveur<\/h4>\n
Vous \u00eates pr\u00eat avec le formulaire et le fichier JS. Maintenant, ajoutez le code ci-dessous dans le fichier JS qui enverra le contenu du fichier c\u00f4t\u00e9 serveur via Ajax.<\/p>\n
custom.js<\/strong><\/p>\n
jQuery(function($) {\n\u00a0\u00a0\u00a0\u00a0$('body').on('change', '#file', function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this = $(this);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0file_data = $(this).prop('files')[0];\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data = new FormData();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data.append('file', file_data);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data.append('action', 'file_upload');\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.ajax({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0url: aw.ajaxurl,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type: 'POST',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0contentType: false,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0processData: false,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data: form_data,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0success: function (response) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this.val('');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert('File uploaded successfully.');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0});\u00a0\u00a0\u00a0 \n});<\/code><\/pre>\n
La partie importante du code ci-dessus est que nous ajoutons une action ‘file_upload’ \u00e0 l’objet form_data. Nous utiliserons cette action ‘file_upload’ pour continuer avec les donn\u00e9es du formulaire.<\/p>\n
Dans le functions.php<\/code>, mappez cette action avec l’Ajax comme suit\u00a0:<\/p>\n
add_action( 'wp_ajax_file_upload', 'file_upload_callback' );\nadd_action( 'wp_ajax_nopriv_file_upload', 'file_upload_callback' );<\/code><\/pre>\n
Si vous \u00e9crivez ce code dans un plugin, vous n’avez pas besoin d’\u00e9crire une deuxi\u00e8me instruction. Ici, aux ‘wp ajax_’ et ‘wp_ajax_nopriv ‘, nous ajoutons la valeur de l’action qui est ‘file_upload’. Le deuxi\u00e8me param\u00e8tre ‘file_upload_callback’ est la m\u00e9thode de rappel qui aura le code r\u00e9el pour le t\u00e9l\u00e9chargement de fichier.<\/p>\n
function file_upload_callback() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$arr_img_ext = array('image\/png', 'image\/jpeg', 'image\/jpg', 'image\/gif');\n\u00a0\u00a0\u00a0\u00a0if (in_array($_FILES['file']['type'], $arr_img_ext)) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$upload = wp_upload_bits($_FILES[\"file\"][\"name\"], null, file_get_contents($_FILES[\"file\"][\"tmp_name\"]));\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/$upload['url'] will gives you uploaded file path\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0wp_die();\n}<\/code><\/pre>\n
J’utilise une m\u00e9thode wp_upload_bits<\/a> pour t\u00e9l\u00e9charger un fichier sur un serveur. Cette m\u00e9thode stocke directement un fichier dans le r\u00e9pertoire wp-content\/uploads.<\/p>\n
Allez-y et essayez de t\u00e9l\u00e9charger un fichier. Votre fichier doit \u00eatre t\u00e9l\u00e9charg\u00e9 dans le dossier wp-content\/uploads\/. Notez que vous trouverez votre fichier dans le dossier du mois en cours du r\u00e9pertoire des t\u00e9l\u00e9chargements.<\/p>\n
T\u00e9l\u00e9charger plusieurs fichiers \u00e0 l’aide d’Ajax dans WordPress<\/h3>\n
Jusqu’\u00e0 pr\u00e9sent, nous avons discut\u00e9 du t\u00e9l\u00e9chargement d’un seul fichier via Ajax. Il peut arriver que vous souhaitiez t\u00e9l\u00e9charger plusieurs fichiers \u00e0 l’aide d’Ajax. Voyons comment y parvenir.<\/p>\n
Pour t\u00e9l\u00e9charger plusieurs fichiers, vous devez apporter de l\u00e9g\u00e8res modifications au code HTML, JS et PHP ci-dessus.<\/p>\n
HTML fournit un attribut \u00ab\u00a0multiple\u00a0\u00bb qui permet \u00e0 un utilisateur de s\u00e9lectionner plusieurs fichiers \u00e0 l’entr\u00e9e du fichier.<\/p>\n
Code HTML<\/strong><\/p>\n
<form class=\"fileUpload\" enctype=\"multipart\/form-data\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label><?php _e('Choose File:'); ?><\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"file\" id=\"file\" accept=\"image\/*\" multiple \/>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n<\/form><\/code><\/pre>\n
En tant qu’utilisateur qui va s\u00e9lectionner plusieurs fichiers, nous devons modifier le code JavaScript qui parcourt chaque fichier et en construit un tableau.<\/p>\n
custom.js<\/strong><\/p>\n
jQuery(function($) {\n\u00a0\u00a0\u00a0\u00a0$('body').on('change', '#file', function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this = $(this);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0file_obj = $this.prop('files');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data = new FormData();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for(i=0; i<file_obj.length; i++) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data.append('file[]', file_obj[i]);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data.append('action', 'file_upload');\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.ajax({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0url: aw.ajaxurl,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type: 'POST',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0contentType: false,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0processData: false,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data: form_data,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0success: function (response) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this.val('');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert('File(s) uploaded successfully.');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0});\n});<\/code><\/pre>\n
Et enfin, dans la fonction de rappel Ajax, nous parcourons le tableau de fichiers et t\u00e9l\u00e9chargeons chaque fichier sur un serveur.<\/p>\n
function file_upload_callback() {\n\u00a0\u00a0\u00a0\u00a0$arr_img_ext = array('image\/png', 'image\/jpeg', 'image\/jpg', 'image\/gif');\n\u00a0\n\u00a0\u00a0\u00a0\u00a0for($i = 0; $i < count($_FILES['file']['name']); $i++) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (in_array($_FILES['file']['type'][$i], $arr_img_ext)) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$upload = wp_upload_bits($_FILES['file']['name'][$i], null, file_get_contents($_FILES['file']['tmp_name'][$i]));\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/$upload['url'] will gives you uploaded file path\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0wp_die();\n}<\/code><\/pre>\n
J’esp\u00e8re que vous avez entendu parler du t\u00e9l\u00e9chargement de fichiers Ajax dans WordPress. J’aimerais entendre vos pens\u00e9es et suggestions dans la section des commentaires ci-dessous.<\/p>\n
Articles Li\u00e9s<\/h4>\n