Uploading files Ajax/Php and knowing how many mb are uploaded in real time

Question

I'm trying to know how many MB are uploaded on my server and I don't really know how to do it. I send my files with a DataForm.

The Javascript :

    <script>
            var fichier = document.querySelector("#fichier"),
                form = new FormData(),
                xhr = new XMLHttpRequest(),
                resultat = document.getElementById('resultat'), //The result of the upload
                spanPourcent = document.getElementById("pourcentage"), //The span used to the percentage
                bar = document.getElementById("bardeprogression"), //The progress bar
                div = document.getElementById("progression");  //The div used to show the progress bar, the percentage and the result of the upload

            function sendForm() { 
                var files = this.files,
                    lenFiles = files.length;

                div.hidden = false;

                //Reset the progress bar
                bar.value = null;
                bar.max = null;

                spanPourcent.innerHTML = "0%";
                resultat.innerHTML = "Chargement...";

                xhr.open("POST", "pages_functions/uploadProcess.php");

                for (var i = 0; i < lenFiles; i++) { //We add every files to the form
                    form.append(i, fichier.files[i]);
                    console.log(i);
                }

                xhr.send(form); //And we send the form
            }

            fichier.addEventListener('change', sendForm);

            xhr.addEventListener('readystatechange', function () {
                console.log("Etat changé");

                if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { //If the request is ended 
                    console.log("Requête fini");

                    if (!isNaN(xhr.responseText)) {//If the serveur sends a number..
                        //Add the message "Uploaded"
                        resultat.innerHTML = "Uploadé avec succés !";

                    } else { //Else it's an error
                        //Show error
                        resultat.innerHTML = xhr.responseText;  
                    }
                } 
            });

            //The progress bar that doesn't work
            xhr.addEventListener('progress', function(e) {
                var pourcentage = e.loaded*100/e.total; //Calculates the percentage

                spanPourcent.innerHTML = pourcentage + "%";

                //The progress bar
                bar.value = e.loaded;
                bar.max = e.total;
            })
</script>

The Html :

  <input id="fichier" type="file" name="userfile" multiple/><br>      
  <div id="progression" hidden>
       <progress id="bardeprogression"></progress>
       <span id="pourcentage">0%</span>
       <div id="resultat"></div>
  </div>

And the PHP :

<?php
    header("Content-Type: multipart/form-data");
    if (isset($_FILES[0]["name"])) {
        $errors = [];
        $path = '../files/';
        $all_files = count($_FILES);

        for ($i = 0; $i < $all_files; $i++) { 
            $files = $_FILES[$i];
            $files_name = $_FILES[$i]["name"];
            $files_tmp = $_FILES[$i]['tmp_name'];

            $file = $path . $files_name;

            if (empty($errors)) {
                move_uploaded_file($files_tmp, $file);
                echo("1"); #The result if all is good

            } else {
                echo($errors);
            } 
        }
      }    
?>

So I want to add a span like "2.6/5MB are uploaded" to my html but I don't know how to do it, the progress event doesn't work with my PHP script because it lauches after the files was uploaded.

Uploading files Ajax/Php and knowing how many mb are uploaded in real time

0 Answers0