CODEWITHSUNDEEP
javascriptphpajaxhtml
user6488504
user6488504

Reputation:

JavaScript progress bar not working

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>

Upvotes: 1

Views: 841

Answers (1)

guest271314
guest271314

Reputation: 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();
  // ...
}

Upvotes: 1

Related Questions