Home/ Questions/Q 9229757
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T05:39:03+00:00

I’m trying to make a progress bar which works with $.ajax(jquery) and php for

  • 0

I’m trying to make a progress bar which works with $.ajax(jquery) and php for a file uploader but I dont know how to assemble it. I know there is a progress bar working with jQuery UI; how ever, it just change while receiving a value. And that’s the point. How can I get a dinamic value for the byte uploded?

By the way, this is my code:

fx_file.js

/*This function gets Data from the form and send it to server*/
function fiEnviarDatos2(){
    $("form#data").click(function(){
            /*Some DOM'S animations*/
    });

    $("form#data").submit(function(){

    var formData = new FormData($(this)[0]);

    $.ajax({
        url: "PHP/Core/Archivos/upload.php",
                    type: 'POST',
                    data: formData,
                    async: false,
                    success: function (data) {

                        /*After actions**/

                    },
                    progress:function(data){
                        alert(data);
                    },
                    cache: false,
                    contentType: false,
                    processData: false
    });
return false;
});`

upload.php

<?php include ("Class_upload.php");

 /*Variables*/
$i=0;
$archivos=0;

/*Contains numbers of file sent*/
$archivos=((count($_FILES,1)-6)/5);

/*Contains the user's session name*/
session_start();
$sUsuario=$_SESSION['usuario'];

/*Use the information of each file to create a new class Upload*/
for($i=0;$i<$archivos;$i++){

    /*FileSize*/
    $tamaArchivo = $_FILES['formUploader']['size'][$i];

    /*Filename*/
    $nombArchivo = strtolower($_FILES['formUploader']['name'][$i]);

    /*Filetemp*/
    $tmpArchivo = $_FILES['formUploader']['tmp_name'][$i];

    /*It creates class Upload*/
    $archivo_subir=new Upload($nombArchivo,$tamaArchivo,$tmpArchivo,$sUsuario);

    /*It validates each file and returns a status*/
    $estatus=$archivo_subir->enviarData();

    /*Returns if file's been uploaded or not*/
    $resultFile=$archivo_subir->resultFile($estatus);
    echo "<br>";
    if($estatus>0){
        echo "<div class='resultDeny'>".$resultFile."</div>";
    }else{
        if($resultFile=="ServerError"){
            echo "<div class='resultServer'>".$resultFile."</div>";
        }else{
            echo "<div class='resultSuccess'>".$resultFile."</div>";
        }

    }

}

I hope I can found some help from you, guys. I know you all are expert. I’m new working with jquery and php; however , i’ve seen “their power together” and i want to learn more about them.

Thanks for all.

PDT: Sorry for my english, it’s not my mother language. JQ &PHP will be.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Check this page out:
    http://www.johnboy.com/php-upload-progress-bar/

    http://www.johnboy.com/php-upload-progress-bar/upload_frame.phps
    basically

            function(data)    //return information back from jQuery's get request
        {
            $('#progress_container').fadeIn(100);    //fade in progress bar    
            $('#progress_bar').width(data +"%");    //set width of progress bar based on the $status value (set at the top of this page)
            $('#progress_completed').html(parseInt(data) +"%");    //display the % completed within the progress bar
        }
    )},500);
    • 0