File Upload Progress Bar with Jquery and PHP.
Wall Script
Follow Me:
Monday, April 09, 2012

File Upload Progress Bar with Jquery and PHP.

We received many tutorial requests from 9lessons readers that asked how to create file upload progress bar with PHP and Jquery. In this post Arun Kumar Sekar had developed few lines of code using PHP APC library, it is very simple getting the server file upload process every few second and increasing the bar color using jquery css property. Just take a look at this demo.

File Upload Progress Bar

Download Script     Live Demo

Developer
Arun Kumar Shekar
Arun Kumar Sekar
Engineer
Chennai, INDIA

To run this script you have to install PHP apc library extension or for PHP 5.4 not required, just follow the steps to enable the extension. For web page design we implemented with bootstrap CSS library for any information check my previous post Bootstrap Tutorial

Windows APC Installation
Follow this link Click Here
In php.ini include apc.rfc1867 = on

Linuk APC Installation
Follow this Link Click Here
In php.ini include apc.rfc1867 = on
php.ini located in /etc/php.ini

get_progress.php
Contains PHP code it identifies file upload status from server process.
<?php
session_start();
error_reporting(0);
/*
// For PHP 5.4 users
$progress_key = ini_get("session.upload_progress.prefix")."uploadImage"; // uploadImage is a Form name
$current = $_SESSION[$progress_key]["bytes_processed"];
$total = $_SESSION[$progress_key]["content_length"];
echo $current < $total ? ceil($current / $total * 100) : 100;
*/
// For PHP 5.2+ php_apc.dll or php_apc.so holder
if(isset($_GET['progress_key']) and !empty($_GET['progress_key'])){
$status = apc_fetch('upload_'.$_GET['progress_key']);
    echo $status['current']/$status['total']*100;
exit;
}
?>

index.php
General form file upload with PHP. You have to include validation rules, please check my previous post for help.
<?php
$uiq = uniqid();
$image_folder = "uploads/";
$uploaded = false;

if(isset($_POST['upload_image'])){
if($_FILES['userImage']['error'] == 0 ){
$up = move_uploaded_file($_FILES['userImage']['tmp_name'], $image_folder.$_FILES['userImage']['name']);
if($up){
$uploaded = true;
}
}
}
?>
<form name="uploadImage" id="uploadImage" enctype="multipart/form-data" action="index.php?progress=<?php echo($uiq)?>" method="post" class="well">
<label>Upload File</label>
<input type="file" name="userImage" id="userImage" />
<span class="badge badge-info" style="display:none;">0%</span>
<input type="submit" class="btn btn-success" name="upload_image" id="upload_image" value="UPLOAD FILE" />
<div class="progress" style="display:none;"><div class="bar" style="width:0%;"></div></div>
</form>

JavaScript File
Contains simple javascript implemented with Jquery properties getting server file process every few seconds.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="application/javascript">
$(document).ready(function(){
var randIDS = '<?php echo $uiq?>';
// Add Hidden Field
var hidden = $("<input>");
hidden.attr({
name:"APC_UPLOAD_PROGRESS",
id:"progress_key",
type:"hidden",
value:randIDS
});
$("#uploadImage").prepend(hidden);
$("#uploadImage").submit(function(e){

var p = $(this);
p.attr('target','tmpForm');

// creating iframe
if($("#tmpForm").length == 0){
var frame = $("<iframe>");
frame.attr({
name:'tmpForm',
id:'tmpForm',
action:'about:blank',
border:0
}).css('display','none');
p.after(frame);
}
// Start file upload
$.get("get_progress.php", {progress_key:randIDS, rand:Math.random()},
function(data){
var uploaded = parseInt(data);
if(uploaded == 100){
$(".progress, .badge").hide();
clearInterval(loadLoader);
}
else if(uploaded < 100)
{
$(".progress, .badge").show();
$(".badge").text(uploaded+"%");
var cWidth = $(".bar").css('width', uploaded+"%");
}
if(uploaded < 100)
var loader = setInterval(loadLoader,2000);
});

var loadLoader = function(){
$.get("get_progress.php", {progress_key:randIDS, rand:Math.random()}, function(data)
{
var uploaded = parseInt(data);
if(uploaded == 100){
$(".progress, .badge").hide();
parent.location.href="index.php?success";
}
else if(uploaded < 100)
{
$(".progress, .badge").show();
$(".badge").text(uploaded+"%");
var cWidth = $(".bar").css('width', uploaded+"%");
}
});
}
});});
</script>
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


82 comments:

  1. Any chance to update you newsletter database so we can download this fantastic script?

    Thanks in adv

    ReplyDelete
  2. does it works with more then one file?

    ReplyDelete
  3. what about multiple upload when you browse you can select multiple picture and upload like facebook or gplus

    ReplyDelete
  4. OMG, Linuk? :) Maybe, Linux?

    ReplyDelete
  5. Thanks... It is so important for web2.0

    ReplyDelete
  6. I got some problem with installing lib to debian... did anyone solve that? :) thanks

    ReplyDelete
  7. First time it worked in the Live Demo, now it writes thast successfully uploaded, but no progess visible.

    ReplyDelete
  8. Subscribed in the morning and still not able to download the scripts???

    I think you should rethink of your subscription policy!!!!!!!!!

    Thanks

    ReplyDelete
  9. Perfect it's what I was searching

    Thanks

    ReplyDelete
  10. Excelente aporte.
    Estaría buenísimo que fuera multiarchivo y arrastro y suelto. Abrazo.

    ReplyDelete
  11. hi, what about linux? the dl has the dll file. ty

    ReplyDelete
  12. Thats a great one!! was allover the internet looking for such a script thanks!!

    ReplyDelete
  13. What PHP Framework do you usually use @ Srinivas?

    ReplyDelete
  14. Good work Arun thanks alot i really need it on my project ..keep it up.

    Regards
    Salman Ahmad

    ReplyDelete
  15. not working in ie 8..

    ReplyDelete
  16. it's not work....not show progress...just 0 % and success upload...

    ReplyDelete
  17. Nice Tutorial. Thanks. Going to use in my future projects.

    ReplyDelete
  18. Thank you very much for your good tutorial!

    ReplyDelete
  19. You´re the guy ! Thanks a lot

    ReplyDelete
  20. I want multiple uploads.
    How to achieve that?

    ReplyDelete
  21. nice upload work yar... but i need this with multiple file upload option , can u plz post r make change it in ....

    ReplyDelete
  22. friend i am unable to run it my php version is 5.3.8 what should i do?

    ReplyDelete
  23. Excellent contribution.
    It would be cool if multifile and dragged out and loose. Embrace.

    ReplyDelete
  24. Problemas con la barra no carga, problemas con la instalación de APC

    ReplyDelete
  25. How do i check file upload size?

    ReplyDelete
  26. For those of you saying it goes from 0% to successful, upload a larger image. Small images takes to fast to upload for the script to update the progress.

    To developer. You should maybe check file size and set update time according to that? For small files, the status bar never gets time to update.

    ReplyDelete
  27. may i know from where you all guys see the upload bar??

    i have uploaded large as well as small image but nothing happened also checking i different browsers meas firefox as well but :(

    why the demo not seen completely??

    one more thing want to say Please correct the Linux APC Installation instead of Linuk APC Installation

    ReplyDelete
  28. Hallo everyone,
    I need your help. Am setting up a web site on which users can upload files and allow other users to download them.
    Can some one tell me please how do I make a file to be downloaded from the server to the client on my site?
    Halla at me at afrofeel@free.fr

    ReplyDelete
  29. Great article.Excellent php code is used.Thank you very much nice sharing.

    ReplyDelete
  30. great work bro !!

    ReplyDelete
  31. please post tutorial about zend framework

    ReplyDelete
  32. please, post the css of progress bar.

    ReplyDelete
  33. Progress bar is not visible

    ReplyDelete
  34. Very nice tut.!!!!

    ReplyDelete
  35. Hello Brother.
    Progress Bar does not work

    ReplyDelete
  36. With IE files are uploaded but the progress bar doesn't work

    ReplyDelete
  37. how do you enable the apc extension when using php 5.4?

    ReplyDelete
  38. Man, great post!...
    But i'm so confused and tired of trying to make it work properly.
    My progress bar is not reaching 100%.
    do you know any resolution for that?

    Thanks!

    ReplyDelete
  39. nice but when not upload in this progress bar no information are come in this bar

    ReplyDelete
  40. progress bar showing when we click on upload button.... please tell me how we show same progress bar only after browse or without clicking on upload button.... like attachment in gmail

    ReplyDelete
  41. For those who do not see the progress bar at first.
    in the index.php file the javascript must be in between the php and the html. The Javascript has an php echo $uiq and must be defined by the php first.

    Also make sure you read and install the boostrap css also. After that it worked 100%

    ReplyDelete
  42. Oh man, perfect!!!!!

    Thanksss a lot from Brazil!

    ReplyDelete
  43. where to put the javascript file

    ReplyDelete
  44. Hi.

    I tested all of your suggestions and I always get the same problem : "current" and "total" values are still to 0. I am wondering where it comes from and asking myself if APC is really working with my file.

    Any suggestion ?

    I really tried a LOT of things...

    ReplyDelete
  45. Just an FYI.. even though I am subscribed I was not able to download the files when I entered my email address. I am a regular visitor to this site but not being able to download drives me away from the site. Eventually I looked at other sites for the same code.

    ReplyDelete
  46. Very nice work, congratulations,
    I installed a new Server with apc feature
    what is the php.ini settings
    Can you help
    best regards

    ReplyDelete
  47. Nice. Please Some one should help me with Upload Script for a zip file.

    ReplyDelete
  48. how i connect this script with data base...

    ReplyDelete
  49. First time it worked in the Live Demo, now it writes thast successfully uploaded, but no progess visible.

    ReplyDelete
  50. For those of you still not seeing the progress bar, try these things:

    Make sure to include bootstrap.css
    Make sure APC is installed
    Make sure to add these to php.ini:
    extension=apc.so
    apc.rfc1867 = on

    That last one, rfc1867 is required for progress upload statuses to work.

    ReplyDelete
  51. Great thank you very much

    ReplyDelete
  52. Really awesome...But there is one problem...when I upload a small sized pic say, 10KB, then it just shows 0% and then gets uploaded

    ReplyDelete
  53. awesome man.... thanks a lot !!

    ReplyDelete
  54. This is scam the database is never updated you can not download even you are subscribed to their news letter.

    ReplyDelete
  55. Hi, there is any tutorial for video conversion using ffmpeg or any other way.....

    ReplyDelete
  56. Really nice. We were looking for exactly this to use on our staff's back-end document upload section. Thank you for your help!

    ReplyDelete
  57. The Progrees bar is not runing 100%. still is showing empty. bascially the hosting is Linux server, related DLL files are configured. still also not getting result. colud u plz help me out

    ReplyDelete
  58. Arun,
    Please help...
    apc_fetch returns data once file completely up-loaded.
    while file getting up-loaded it always return false so I always see 0%.

    ReplyDelete
  59. The Progrees bar is not working with fronted Nginx or other. only with apache.

    ReplyDelete
  60. I have done some modifications and now it's work.

    https://dl.dropboxusercontent.com/u/6347350/FilesUpload_PHP_APC_JQuery.zip

    ReplyDelete
  61. THanks a lot. I also found very useful a example found on Github: https://github.com/pH-7/PHP5.4-Session-Upload-Progress-Bar

    ReplyDelete
  62. it's not working. Your demo doesn't work too.

    ReplyDelete

Make in India