uploading file to server using php and html

Question

i have a problem with uploading file to the server im using php my code works fine and sure its fast because im uploading it to localhost but how can i create a progress bar something that will update the user that the file is uploading. thanks. ive found the code of uploading from other site

                $file = rand(1000,100000)."-".$_FILES['file']['name'];
                $file_loc = $_FILES['file']['tmp_name'];
                $file_size = $_FILES['file']['size'];
                $file_type = $_FILES['file']['type'];
                $folder="uploads/";
                $new_size = $file_size/1024;  
                $new_file_name = strtolower($file);
                $final_file=str_replace(' ','-',$new_file_name);
                if(move_uploaded_file($file_loc,$folder.$final_file))
                {
                    require_once 'dbconfig.php';
                    try {
                    $conn = new PDO("mysql:host=$host;dbname=$dbname",$username, $password, array(PDO::ATTR_ERRMODE => PDO::ERRMODE_WARNING));
                    $stmt = $conn->prepare("CALL sp_insertdocument (?,?,?,?,?,?,?,?,?)");

                    $stmt->bindParam(1, $doctitle, PDO::PARAM_STR, 30);
                    $stmt->bindParam(2, $doctype, PDO::PARAM_STR, 30);
                    $stmt->bindParam(3, $doccontent, PDO::PARAM_STR, 30);
                    $stmt->bindParam(4, $datefilled, PDO::PARAM_STR, 30);
                    $stmt->bindParam(5, $request, PDO::PARAM_STR, 30); 
                    $stmt->bindParam(6, $staffid, PDO::PARAM_STR, 30); 
                    $stmt->bindParam(7, $final_file, PDO::PARAM_STR, 30); 
                    $stmt->bindParam(8, $file_type, PDO::PARAM_STR, 30); 
                    $stmt->bindParam(9, $new_size, PDO::PARAM_STR, 30); 
                    $stmt->execute();

                }

Answer 1

I have used the following in most of my projects. Try the following:

ajax = new XMLHttpRequest();
ajax.onreadystatechange = function ()
{

    if (ajax.status) {

    if (ajax.status == 200 && (ajax.readyState == 4))
    {
        //To do tasks if any if upload is completed
    }
    }
}
ajax.upload.addEventListener("progress", function (event) {

    var percent = (event.loaded / event.total) * 100;
    //percent variable can be used for modifying the length of your progress bar.
    console.log(percent);

});

ajax.open("POST", 'your file upload link', true);
ajax.send(formData);
//ajax.send id for sending upload form data.

Answer 2

You've to use JavaScript/Jquery to implement fileupload with progress below the best example for your solution.

Click here to download script with demo

Thanks!