Bonjour à tous,
Depuis peu je m'inspire beaucoup de ce site pour faire les miens (un grand merci à grafikart qui m'a permis de progresser rapidement). Aujourd'hui je me heurte à un problème sur l'envoi de fichiers; j'aimerais beaucoup ajouter une barre de progression pour donner un peu plus d'esthétique à mon site. J'ai essayé par la méthode Ajax mais le seul truc que j'ai pu faire c'était d'afficher un "envoi en cours". je me suis inspiré du tutoriel "réaliser un portfolio" pour faire cela avec une récupération du contenu du ($_POST ) sur le même fichier php pour faire mes requêtes et enregistrer les modifications dans une base de données. Par contre en testant le formulaire sur un input type="button" avec un événement sur le onclick l'envoi du fichier se fait mais pas de submit sur le formulaire alors que quand je passe sur un input type="submit" l'envoi du fichier et l'insertion en base de donnée se fait mais plus de barre de progression. Auriez vous une idée ?
Finalement je me suis dirigé vers ce plugin : "http://jquery.malsup.com/form/#getting-started "
et depuis ça fonctionne comme je le désire; Merci à tous
Une recherche rapide sur google me donne ca :
http://www.orugari.fr/orugari/upload-de-fichier-avec-barre-de-progression-utilisant-jquery-et-php/
Deja je pense que cela peut te donner un debut.
j'ai testé ça :
<script>
function uploadFile(){
var file = _("file1").files[0];
// alert(file.name+" | "+file.size+" | "+file.type);
var formdata = new FormData();
formdata.append("file1", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "file_uploadparser.php");
ajax.send(formdata);
}
function progressHandler(event){
("loaded_ntotal").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
var percent = (event.loaded / event.total) * 100;
("progressBar").value = Math.round(percent);
("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}
function completeHandler(event){
("status").innerHTML = event.target.responseText;
("progressBar").value = 0;
}
function errorHandler(event){
("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
_("status").innerHTML = "Upload Aborted";
}
</script>
<input type="button" value="Upload File" onclick="uploadFile()">
ça marche à moitié ça me fait l'upload mais pas d'ajout dans la base de donnée par contre avec ça
<button type="submit" style="padding-top:10px" class="btn btn-success">Enregistrer</button>
j'ai bien l'ajout dans la base de donnée mais pas de barre de progression comme si le script ne se lançait pas
Merci Grafikart je vais revisionner ton tuto quelque chose a du m'échapper et merci encore à vous tous