Asked  7 Months ago    Answers:  5   Viewed   35 times

I need help with creating a progress bar for my php upload site. I've got the upload and exctract part sorted but i need help with the progress bar. I'm not sure how to do it. Also, is there a maximum file size for the upload?


<?php if($message) echo "<p>$message</p>"; ?>
<form enctype="multipart/form-data" method="post" action="">
<label>Choose file (.zip): <input type="file" name="zip_file" /></label>
<br />
<input type="submit" value="Upload" name="submit" value="Upload" />


if($_FILES["zip_file"]["name"]) {
  $filename = $_FILES["zip_file"]["name"];
  $source = $_FILES["zip_file"]["tmp_name"];
  $type = $_FILES["zip_file"]["type"];

  $name = explode(".", $filename);
  $accepted_types = array(

  foreach($accepted_types as $mime_type) {
    if($mime_type == $type) {
      $okay = true;

  $continue = strtolower($name[1]) == 'zip' ? true : false;
  if(!$continue) {
    $message = "[...] not a .zip file. Please try again.";
  $target_path = "./".$filename;
  if(move_uploaded_file($source, $target_path)) {
    $zip = new ZipArchive();
    $x = $zip->open($target_path);
    if ($x === true) {

    $message = "Your .zip file was uploaded and unpacked.";
  } else {  
    $message = "There was a problem with the upload. Please try again.";



You can make some changes to fit but this works rather well if you want a progress bar. You can add more eventlisteners and make it how you want. I hope this is a good starting point for you.

function uploadFile(){
    var file = document.getElementById("zip_file").files[0];
    var formdata = new FormData();
    formdata.append("zip_file", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", function(event) { runprogress(event); } , false);
    ajax.addEventListener("load", function(event) {uploadcomplete(event); }, false);
    //Target your php file."POST", "upload.php");
function runprogress(event){
    //The progress %, you might want to Math.round(percent) 
    var percent = (event.loaded / * 100;
function uploadcomplete(event){
    //This will = to your php reply.
Wednesday, March 31, 2021
answered 7 Months ago

Well after you upload it, you can use javascript to put it on the html page.

I'm not quite sure what your question is, though


So, html form on your page:

<form action="imageUpload.php" method="post" enctype="multipart/form-data" target="upload_target"  onsubmit="jupload();"  id="form1" >
    <div style="visibility:'hidden';" class="imageholder"> <!-- a gif image to show that the process wasn't finished -->
    <input type="file" name="imgfile" /> 
    <input type="submit" name="uploadButton" class="upbtn" value="Submit" />

Javascript(JQUERY) code for the upload and image add:

function jupload()
    $(".imageholder").append('<img src="./images/loading.gif">');

function juploadstop(result)

    // the result will be the path to the image
    else if(result!=0)
        // imageplace is the class of the div where you want to add the image  
        $(".imageplace").append("<img src='"+result+"'>");

php code:

    $target = "";
    $target = $target . basename( $_FILES['uploaded']['name']) ; 

    if (move_uploaded_file($_FILES['uploaded']['tmp_name'], $target)) 

<script language="javascript" type="text/javascript"><?php echo $result; ?>);
Wednesday, March 31, 2021
answered 7 Months ago

This is by far (after hours of googling and trying scripts) the simplest to set up and nicest uploader I've found

It doesn't require APC or any other external PHP libraries, I can get file progress feedback on a shared host, and it claims to support html5 drag and drop (personally untested) and multiple file uploads.

Tuesday, June 1, 2021
answered 5 Months ago


The PHP Doc is very detailed it says

The upload progress will be available in the $_SESSION superglobal when an upload is in progress, and when POSTing a variable of the same name as the INI setting is set to. When PHP detects such POST requests, it will populate an array in the $_SESSION, where the index is a concatenated value of the session.upload_progress.prefix and INI options. The key is typically retrieved by reading these INI settings, i.e.

All the information you require is all ready in the PHP session naming

  • start_time
  • content_length
  • bytes_processed
  • File Information ( Supports Multiple )

All you need is to extract this information and display it in your HTML form.

Basic Example


<link href=""
rel="stylesheet" type="text/css" />
<script src=""></script>
<script src=""></script>
<script type="text/javascript">
    var intval = null;
    var percentage = 0 ;
    function startMonitor() {
        function (data) {
            if (data) {
                percentage = Math.round((data.bytes_processed / data.content_length) * 100);
                $("#progressbar").progressbar({value: percentage});
                $('#progress-txt').html('Uploading ' + percentage + '%');

            if(!data || percentage == 100){

    function startInterval() {
        if (intval == null) {
            intval = window.setInterval(function () {startMonitor()}, 200)
        } else {

    function stopInterval() {
        if (intval != null) {
            intval = null;



header('Content-type: application/json');
echo json_encode($_SESSION["upload_progress_upload"]);

Example with PHP Session Upload Progress

Here is a better optimized version from PHP Session Upload Progress


$('#fileupload').bind('fileuploadsend', function (e, data) {
    // This feature is only useful for browsers which rely on the iframe transport:
    if (data.dataType.substr(0, 6) === 'iframe') {
        // Set PHP's value:
        var progressObj = {
            name: 'PHP_SESSION_UPLOAD_PROGRESS',
            value: (new Date()).getTime()  // pseudo unique ID
        // Start the progress polling:'interval', setInterval(function () {
            $.get('progress.php', $.param([progressObj]), function (result) {
                // Trigger a fileupload progress event,
                // using the result as progress data:
                e = document.createEvent('Event');
                e.initEvent('progress', false, true);
                $.extend(e, result);
                $('#fileupload').data('fileupload')._onProgress(e, data);
            }, 'json');
        }, 1000)); // poll every second
}).bind('fileuploadalways', function (e, data) {


$s = $_SESSION['upload_progress_'.intval($_GET['PHP_SESSION_UPLOAD_PROGRESS'])];
$progress = array(
        'lengthComputable' => true,
        'loaded' => $s['bytes_processed'],
        'total' => $s['content_length']
echo json_encode($progress);

Other Examples

  • Tracking Upload Progress with PHP and JavaScript
  • PHP-5.4-Upload-Progress-Example
Monday, June 21, 2021
answered 4 Months ago
  1. post_max_size should be 3G

  2. upload_max_filesize should be 3G

  3. memory_limit depends!!! what you are going to do with the file. If you are going to manipulate the file or do other memory intensive jobs, then you will need to set a high limit. If you don't want to put a maximum limit, you can always set it to -1. This value doesn't have to do much with the size of the file, but rather with the size of the physical memory your script needs to handle the job.

For the first two, it is the maximum file size you expect to be uploaded, suffixed with a short hand byte value. For KB should be K, MB should be M, GB should be G, ...

Tuesday, July 6, 2021
answered 4 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :