1

I have created a progress bar using html5, JavaScript and Ajax to show file upload in PHP.

The problem is that it's not showing the progress. Apart from that,

  1. the echo statements in the PHP are also not working
  2. the file is not uploading the target directory.

Here is the code.

JS code. 

<script type="text/javascript" >
            function _(el){
                return document.getElementById(el);
            }
            function uploadFile(){
                var file = _("fileToUpload").files[0];
                // alert(file.name+" | "+file.size+" | "+file.type);
                var formdata = new FormData();
                formdata.append("fileToUpload", 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_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>

PHP and HTML5 code. 

<?php
        if(isset($_FILES['UploadFileField']))
        {
            // Creates the Variables needed to upload the file

                $UploadName = $_FILES['fileToUpload']['name'];
                //$UploadName = mt_rand(100000, 999999).$UploadName;
                $UploadTmp = $_FILES['fileToUpload']['tmp_name'];

                $target_dir = "uploads/";
                $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
                $uploadOk = 1;

                // Check if file already exists
                if (file_exists($target_file)) {
                    echo "Sorry, file already exists.";
                    $uploadOk = 0;
                }
                // Check file size
                if ($_FILES["fileToUpload"]["size"] > 500000) {
                    echo "Sorry, your file is too large.";
                    $uploadOk = 0;
                }

                // Check if $uploadOk is set to 0 by an error
                if ($uploadOk == 0) {
                    echo "Sorry, your file was not uploaded.";
                // if everything is ok, try to upload file
                } else {
                    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
                        echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
                    } else {
                        echo "Sorry, there was an error uploading your file.";
                    }
                }

    }
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="CSS.css">
    <link type="text/javascript" href="progressBar.js">

    <title>Submit Your Video</title>
    <h1>Welcome to Video Submission Form</h1>
</head>
<body>
        <form action="VideoUpload.php" method="post" enctype="multipart/form-data" name="FileUploadForm" id=        "FileUploadForm">
       <div id="form">

            <legend>File Upload</legend>
            <progress id="progressBar" value="0" max="100" style="width:300px;" ></progress>
            <h3 id="status"></h3>
            <p id="loaded_n_total"></p>
            File Name <input type="text" name="file" id="file" placeholder="Enter the title" > <br><br>
            <label for="fileToUpload"> </label>
            <input type="file" name="fileToUpload" id="fileToUpload"/> <br><br>
            <input type="submit" name="fileToUpload" id="UploadButton" value="Upload" /> <br>



       </div>

    </form>
</body>
</html>
das-g
  • 9,718
  • 4
  • 38
  • 80
Nauman
  • 894
  • 4
  • 14
  • 45
  • What are `"loaded_n_total"` , `"progressBar"` , `"status"` ? – guest271314 Aug 16 '15 at 13:42
  • @guest271314 "loaded_n_total" is to show the loaded bytes and total bytes. "progressBar" is basically for the progress element in the html. "status" is to show the percentage. – Nauman Aug 16 '15 at 13:49
  • _""loaded_n_total" is to show the loaded bytes and total bytes. "progressBar" is basically for the progress element in the html. "status" is to show the percentage."_ Yes, is `"loaded_n_total"` an `html` tag , `DOM` element ? – guest271314 Aug 16 '15 at 13:52
  • @guest271314 yes it is – Nauman Aug 16 '15 at 13:55
  • Can include `html` at Question ? – guest271314 Aug 16 '15 at 13:56
  • Can the `html` described at Question be included at Question ? Do not have access to `html` described at Question here - not currently included at Question. – guest271314 Aug 16 '15 at 14:02
  • @guest271314 the html is below the php code... so please scroll down.. – Nauman Aug 16 '15 at 14:03

1 Answers1

1

Try adding onchange event

var el = _("file");
el.onchange = uploadFile;

the form element may submit before POST completes if event default action not prevented

function uploadFile(e) {
  e.preventDefault();
  // ...
}
guest271314
  • 1
  • 15
  • 104
  • 177
  • can you also look at 2 other problems as well.. thank you. – Nauman Aug 16 '15 at 14:29
  • @NaumanTanwir Just noticed `_` function , which should return element when `_("loaded_n_total")` called ; solution posted above should not affect expected results if `_(element_id)` returns expected element – guest271314 Aug 16 '15 at 14:32
  • @NaumanTanwir See also http://stackoverflow.com/questions/28856729/upload-multiple-image-using-ajax-php-and-jquery/ – guest271314 Aug 16 '15 at 14:52