{"id":24633,"date":"2021-05-22T14:01:00","date_gmt":"2021-05-22T11:01:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24633"},"modified":"2021-10-18T02:14:33","modified_gmt":"2021-10-17T23:14:33","slug":"telechargement-de-fichiers-ajax-avec-php-et-jquery","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/telechargement-de-fichiers-ajax-avec-php-et-jquery\/","title":{"rendered":"T\u00e9l\u00e9chargement de fichiers Ajax avec PHP et jQuery"},"content":{"rendered":"

Vous recherchez un t\u00e9l\u00e9chargement de fichier en utilisant Ajax en PHP? Le t\u00e9l\u00e9chargement d’un fichier via Ajax est une tendance de nos jours. Il ajoute une meilleure exp\u00e9rience utilisateur sur un site Web. Dans cet article, je vous montre comment t\u00e9l\u00e9charger des fichiers via Ajax avec PHP et jQuery.<\/p>\n

Le t\u00e9l\u00e9chargement de fichiers\/d’images est une t\u00e2che r\u00e9guli\u00e8re pour les d\u00e9veloppeurs. Il existe plusieurs cas o\u00f9 vous devez cr\u00e9er une fonctionnalit\u00e9 de t\u00e9l\u00e9chargement de fichiers. Certains des exemples courants sont le t\u00e9l\u00e9chargement de photos de profil, d’images de curseur, de t\u00e9moignages, de portfolios, de carrousels, etc.<\/p>\n

Pourquoi avoir besoin de File Upload en utilisant Ajax ?<\/h3>\n

La principale raison pour laquelle vous effectuez un t\u00e9l\u00e9chargement de fichier via Ajax est que vous ne souhaitez pas actualiser une page apr\u00e8s le t\u00e9l\u00e9chargement de fichier. Et c’est \u00e9vident. Il ne sert \u00e0 rien de charger une page enti\u00e8re si ce n’est pas n\u00e9cessaire. Si vous chargez une page apr\u00e8s le t\u00e9l\u00e9chargement du fichier, vous ajoutez une charge suppl\u00e9mentaire sur un serveur.<\/p>\n

Le t\u00e9l\u00e9chargement de fichiers \u00e0 l’aide d’Ajax r\u00e9duit la charge inutile sur un serveur et offre une meilleure exp\u00e9rience utilisateur sur le site Web.<\/p>\n

Alors sans plus tarder commen\u00e7ons par le code.<\/p>\n

T\u00e9l\u00e9chargement de fichiers en utilisant Ajax avec PHP et jQuery<\/h3>\n

Commen\u00e7ons par cr\u00e9er un formulaire qui a une entr\u00e9e de fichier et le bouton d’envoi. Ajoutez le code HTML ci-dessous dans votre fichier, par exemple index.php<\/code>.<\/p>\n

<form>\n\u00a0\u00a0\u00a0\u00a0<p><input type=\"file\" name=\"file\" class=\"file\" required><\/p>\n\u00a0\u00a0\u00a0\u00a0<input type=\"submit\" name=\"submit\" class=\"submit\" value=\"Submit\">\n<\/form><\/code><\/pre>\n
Comme je vais \u00e9crire un peu de code JavaScript, j’ai respectivement ajout\u00e9 les classes ‘file’ et ‘submit’ aux boutons d’entr\u00e9e et de soumission du fichier. Ces classes servent d’identifiant pour les \u00e9l\u00e9ments de formulaire.<\/p>\n
Code JavaScript<\/h4>\n
Ensuite, \u00e9crivez du code JavaScript qui donnera un appel Ajax \u00e0 un c\u00f4t\u00e9 serveur et g\u00e9rera la r\u00e9ponse.<\/p>\n
<script src=\"https:\/\/code.jquery.com\/jquery-3.5.0.js\"><\/script>\n<script type=\"text\/javascript\">\n\u00a0\u00a0\u00a0\u00a0$(function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('.submit').on('click', function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var file_data = $('.file').prop('files')[0];\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(file_data != undefined) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var form_data = new FormData();\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data.append('file', file_data);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.ajax({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\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\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0url: 'ajax.php',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\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\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0processData: false,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\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\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\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(response == 'success') {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\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\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert('Something went wrong. Please try again.');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('.file').val('');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return false;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0});\n<\/script><\/code><\/pre>\n
Dans le code JavaScript ci-dessus, j’envoie le contenu du ajax.php<\/code>fichier au fichier et g\u00e8re \u00e9galement la r\u00e9ponse.<\/p>\n
Code PHP<\/h4>\n
\u00c0 ce stade, nous avons termin\u00e9 d’envoyer le contenu du fichier c\u00f4t\u00e9 serveur. Cr\u00e9ez maintenant un fichier ajax.php<\/code>o\u00f9 nous devons \u00e9crire le code PHP qui t\u00e9l\u00e9charge les fichiers sur un serveur.<\/p>\n
ajax.php<\/strong><\/p>\n
<?php\nif (!file_exists('uploads')) {\n\u00a0\u00a0\u00a0\u00a0mkdir('uploads', 0777);\n}\n\u00a0\u00a0\nmove_uploaded_file($_FILES['file']['tmp_name'], 'uploads\/'. $_FILES['file']['name']);\n\u00a0\u00a0\necho \"success\";\ndie();<\/code><\/pre>\n
Le code PHP ci-dessus v\u00e9rifie d’abord le r\u00e9pertoire ‘uploads’. Si ce r\u00e9pertoire n’existe pas, il le cr\u00e9e et t\u00e9l\u00e9charge le fichier dans ce dossier.<\/p>\n
J’esp\u00e8re que vous pouvez maintenant facilement mettre en \u0153uvre le t\u00e9l\u00e9chargement de fichiers \u00e0 l’aide d’Ajax sur votre site Web. J’aimerais entendre vos pens\u00e9es dans la section des commentaires ci-dessous.<\/p>\n
Articles Li\u00e9s<\/h4>\n