[Résolu] Tutoriel : Upload de fichiers en javascript

La réponse tient en un seul mot : l'objet XHR ou XMLHttpRequest.
Bien sûr tout le monde à déjà fait un scipt d'upload d'image en HTML et PHP. Pour ça, rien de plus simple :

<form method="post" action="reception.php" enctype="multipart/form-data">
     <input type="hidden" name="MAX_FILE_SIZE" value="1048576" />
     <input type="file" name="mon_fichier" id="mon_fichier" /><br />
     <input type="submit" name="submit" value="Envoyer" />
</form>

Bim, on clique et c'est au PHP de jouer via reception.php.
Ici ce que l'on veut c'est appeller le fichier reception.php, uploader son document et avoir une barre de progression lors de l'upload, le tout sans quitter la page index.html qui nous plait tant.

Alors on aura besoin d'un fichier index.html et de son fichier style.css, d'un fichier upload.js, et d'un hypothétique fichier de réception du fichier en php, ici notre reception.php.

Le but est de créer un formulaire en HTML et une barre de progression en html:

<input type="file" id="file"/>
<div class="bar"><div class="progress"></div></div>

TCHACK!
On y associe notre fichier js :

<script type="text/javascript" src="upload.js"></script>

Et notre fichier css :

<link type="text/css" href="style.css" rel="stylesheet" />

Ce qui donne :
index.html

<link type="text/css" href="style.css" rel="stylesheet" />
<input type="file" id="file"/>
<div class="bar"><div class="progress"></div></div>
<script type="text/javascript" src="upload.js"></script>

Passons au plus intéressant, notre fichier js en deux parties, une pour la barre de progression, et l'autre pour l'upload avec XHR :

J'utilise JQuery, mais la même chose est possible sans.

upload.js - barre de progression :

function initBar() {
$(".bar").show();
setProgressBar(0);
}
function setProgressBar(percent) {
$(".bar .progress").css("width", percent + "%");
$(".bar .progress").data("value", percent);
}
function endBar() {
$(".bar").hide();
}

Un petit bout d'explication : on à un div qui fait une partie de la taille de l'écran (.bar) et un div à l'intérieur de ce div qui fait une partie de ce div (.progress). Quand on augmente la taille de ce div (.progress) puisqu'il est collé du coté gauche de .bar, cela simule une progression linéaire.

upload.js - upload de fichier :

function upload(file) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'reception.php');
    initBar();
    xhr.upload.onprogress = function(e) {
    	var loaded = e.loaded / e.total * 100;
    	setProgressBar(loaded);
    };
    xhr.onload = function(e) {   
        endBar();
    };  
    var form = new FormData();
    form.append('file', file);
    xhr.send(form);
}
var fileInput = document.querySelector('#file');
fileInput.onchange = function() {
    upload(fileInput.files[0]);
};

Un petit bout d'explication : quand #file est changé (fileInput.onchange), ou plus simplement, quand un fichier est choisi par l'utilisateur, on appelle la fonction upload de ce fichier. On crée un objet XHR, on lui assigne la cible du formulaire d'upload (reception.php), puis on initialise la barre de progression. La fonction onprogress est appelée à intervalles réguliers lors de l'upload, et la fonction onload est appelée à la fin de l'upload, on envoie le formulaire (xhr.send(form) ) et hop, un fichier uploadé!

Notre fichier css :
style.css

.bar {
    display: none;
    background-color: #575757;
    height: 5px;
    left: 50%;
    margin-left: -300px;
    margin-top: 40px;
    position: absolute;
    top: 50%;
    width: 600px;
    z-index: 20;
}

.bar .progress {
    width: 0%;
    height: 100%;
    background-color: #E02222;
}

Et hop le tour est joué!
Merci Dr. Dino!

Merci pour vos lumières Dr.Dino !

Bonjour,
Je recherche désespérément le moyen de faire une barre de progression pour un upload de fichier.
Je n'arrive pas à trouver sur le net des explications complètes et bien documentées en français.
Je ne maitrise pas du tout le javascript, mais ça va en PHP.
Lorsque j'ai trouvé votre tuto, de plus en français, je croyais avoir trouvé le graal.
Je dois être un peu obtus, mais je n'arrive pas à faire fonctionner votre exemple. Tout marche bien, sauf que la barre de progression ne s'affiche pas !.....
si dans le fichier css j'enlève display:none , je vois bien la barre. Par contre, pas la progression .
Pouvez-vous m'aider ?
D'avance merci.