Formulaire d’upload en ajax jquery avec barre de progression

Upload avec progress bar en ajax simple

Plus bas vous avez la version avec jquery 😉

Voici un exemple de formulaire d’upload de fichier avec une barre de chargement en utilisant Ajax :

<form id="uploadForm">
<input type="file" id="fileInput" />
<progress id="progressBar" value="0" max="100"></progress>
</form>

<script>
var form = document.getElementById('uploadForm');
var fileInput = document.getElementById('fileInput');
var progressBar = document.getElementById('progressBar');

form.onsubmit = function(event) {
event.preventDefault();

// Récupération du fichier à envoyer
var file = fileInput.files[0];

// Création d'un objet FormData et ajout du fichier à envoyer
var formData = new FormData();
formData.append('file', file);

// Création de l'instance XMLHttpRequest
var xhr = new XMLHttpRequest();

// Configuration de la requête
xhr.open('POST', 'upload.php', true);

// Lorsque la réponse est chargée
xhr.onload = function () {
if (this.status === 200) {
var response = JSON.parse(this.response);
console.log(response.message);
}
};

// Gestion de la progression du téléchargement
xhr.upload.onprogress = function(event) {
var percent = (event.loaded / event.total) * 100;
progressBar.value = percent;
}

// Envoi de la requête
xhr.send(formData);
};
</script>

Dans cet exemple, nous avons un formulaire avec un champ de type file et une barre de chargement. Lorsque le formulaire est soumis, nous récupérons d’abord le fichier à envoyer. Nous créons ensuite un objet FormData et y ajoutons le fichier.

Ensuite, nous créons une instance de XMLHttpRequest et ouvrons une requête POST vers la page upload.php. Nous gérons ensuite la progression du téléchargement en mettant à jour la valeur de la barre de chargement en fonction du pourcentage de téléchargement. Lorsque la réponse est chargée, nous vérifions si le statut est égal à 200 (OK) et si c’est le cas, nous affichons le message contenu dans la réponse en utilisant console.log(). Enfin, nous envoyons la requête en utilisant la méthode send() en lui passant l’objet FormData que nous avons créé.

Le code du fichier upload.php dépend ensuite de la façon dont vous souhaitez traiter le fichier uploadé.

Mais voici un exemple de base pour traiter le fichier uploadé :

<?php

// Récupération du fichier uploadé
$file = $_FILES['file'];

// Vérification de l'upload du fichier
if ($file['error'] === UPLOAD_ERR_OK) {
// Récupération du nom du fichier
$fileName = $file['name'];

// Déplacement du fichier dans le répertoire de destination
$move = move_uploaded_file($file['tmp_name'], 'uploads/' . $fileName);

if ($move) {
// Envoi d'une réponse JSON avec le message de succès
header('Content-Type: application/json');
echo json_encode(['message' => 'Le fichier a été uploadé avec succès']);
} else {
// Envoi d'une réponse JSON avec le message d'erreur
header('Content-Type: application/json');
echo json_encode(['message' => 'Une erreur s\'est produite lors de l\'upload du fichier']);
}
}

Dans cet exemple, nous récupérons d’abord le fichier uploadé à partir du tableau $_FILES. Nous vérifions ensuite si l’upload s’est effectué correctement en vérifiant la valeur de la clé error. Si l’upload s’est bien effectué, nous récupérons le nom du fichier et déplaçons le fichier dans le répertoire uploads. Si le déplacement s’est bien effectué, nous envoyons une réponse JSON avec un message de succès. Sinon, nous envoyons une réponse JSON avec un message d’erreur.

Il est important de noter que cet exemple est très simpliste et ne prend pas en compte des aspects tels que la sécurité et la validation des fichiers uploadés. Il est recommandé de les implémenter dans votre code en fonction de vos besoins.

Upload avec progress bar en Jquery

Voici un exemple de formulaire d’upload de fichier avec une barre de chargement en utilisant Ajax et jQuery :

<form id="uploadForm">
<input type="file" id="fileInput" />
<progress id="progressBar" value="0" max="100"></progress>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('#uploadForm').on('submit', function(event) {
event.preventDefault();

// Récupération du fichier à envoyer
var file = $('#fileInput')[0].files[0];

// Création d'un objet FormData et ajout du fichier à envoyer
var formData = new FormData();
formData.append('file', file);

// Configuration de la requête Ajax
$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response) {
console.log(response.message);
},
xhr: function() {
// Récupération de l'objet XMLHttpRequest
var xhr = $.ajaxSettings.xhr();

// Gestion de la progression du téléchargement
xhr.upload.onprogress = function(event) {
var percent = (event.loaded / event.total) * 100;
$('#progressBar').val(percent);
}

return xhr;
}
});
});
</script>

Ensuite, nous configurons une requête Ajax en utilisant jQuery. Nous spécifions l’URL de la page upload.php et la méthode POST. Nous passons l’objet FormData en tant que données à envoyer et spécifions que les données ne doivent pas être traitées ni envoyées avec un en-tête de type. Nous gérons ensuite la progression du téléchargement en mettant à jour la valeur de la barre de chargement en fonction du pourcentage de téléchargement. Lorsque la réponse est chargée, nous affichons le message contenu dans la réponse en utilisant console.log(). Enfin, nous envoyons la requête en utilisant la méthode ajax() de jQuery.

Le code du fichier upload.php dépend, là aussi, de la façon dont vous souhaitez traiter le fichier uploadé.

Voici l’exemple de base pour traiter le fichier uploadé :

<?php

// Récupération du fichier uploadé
$file = $_FILES['file'];

// Vérification de l'upload du fichier
if ($file['error'] === UPLOAD_ERR_OK) {
// Récupération du nom du fichier
$fileName = $file['name'];

// Déplacement du fichier dans le répertoire de destination
$move = move_uploaded_file($file['tmp_name'], 'uploads/' . $fileName);

if ($move) {
// Envoi d'une réponse JSON avec le message de succès
header('Content-Type: application/json');
echo json_encode(['message' => 'Le fichier a été uploadé avec succès']);
} else {
// Envoi d'une réponse JSON avec le message d'erreur
header('Content-Type: application/json');
echo json_encode(['message' => 'Une erreur s\'est produite lors de l\'upload du fichier']);
}
}