I'm trying to show the progress so far while uploading a file using javascript and php. The code below works and the files get uploaded but the progress bar does not show the progress and the total so far which is the p tag with id loaded_n_total does not show anything. I've tested with small files and files as large as 800MB.

html
<!DOCTYPE html>
<html>
    <head>
        <script>
            function _(el) {
                return document.getElementById(el);
            }
            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("process", progressHandler, false);
                ajax.addEventListener("load", completeHander, false);
                ajax.addEventListener("error", errorHandler, false);
                ajax.addEventListener("abort", abortHandler, false);
                ajax.open("POST", "file_upload_parser.php");
                ajax.send(formdata);
            }
            function progressHandler(event) {
                _("loaded_n_total").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>
    </head>
    <body>
        <h2>HTML5 File Upload Progress Bar Tutorial</h2>
        <form id="upload_form" enctype="multipart/form-data" method="post">
            <input type="file" name="file1" id="file1"><br>
            <input type="button" value="Upload File" onclick="uploadFile()">
            <progress id="progressBar" value="0" max="100" style="width: 300px;"></progress>
            <h3 id="status"></h3>
            <p id="loaded_n_total"></p>
        </form>
    </body>
</html>

php

<?php
$fileName = $_FILES["file1"]["name"]; // The file name
$fileTmpLoc = $_FILES["file1"]["tmp_name"]; // File in the PHP tmp folder
$fileType = $_FILES["file1"]["type"]; // The type of file it is
$fileSize = $_FILES["file1"]["error"]; // 0 for false... and 1 for true
if (!$fileTmpLoc) { // if file not chosen
    echo "ERROR: Please browse for a file before clicking the upload button.";
    exit();
}
if(move_uploaded_file($fileTmpLoc, "test_uploads/$fileName")) {
    echo "$fileName upload is complete";
} else {
    echo "move_uploaded_file function failed";
}
?>

1 Answers

0
Markus Zeller On

Change the event from "process" to "progress".

ajax.upload.addEventListener("progress", progressHandler, false);