Geek asks and answers

How would you implement a basic progress bar on file upload in php 5.4?

I noticed that this was a PHP enhancement added in PHP 5.4.

I also understand that this uses the SESSION status, and in order for it to appear, you will need some kind of Javscript to update the HTML. I believe javascript is launched by clicking the submit button. And the interval timer can be set to check progress.

All I want to do is update the HTML div file. (e.g. 25% ... 35%)

My understanding so far:
 - You need a form with a hidden value
 - This creates a SESSION of the VARIABLE on the name that has the information in
 - You need to monitor the progress to get its status

Options
 - Method 1: Use the ready-made, which you can find on the Internet. Little / Nothing is explained.
 - Method 2: send the file to another php file and use JSinterval to check its progress.
 - Method 3: Is there a way to do all this on one page?

+5
source share
1 answer
<div id="progress"></div>
<form action="/upload.php" method="POST" enctype="multipart/form-data" id="upload">
 <input type="hidden" name="<?php echo ini_get("session.upload_progress.name"); ?>" value="upload" />

 <input type="file" name="file" id="file" />
 <input type="submit" value="Upload" onclick="upload()"/>
</form>

    <script>
      //Check Sumbit has been clicked; either onclick or event handler
      //Setup an interval timer updating the 'PROGRESS' div each check
      //Each Interval: Get SESSION VARIABLE status and Update the div 'PROGRESS'
      //Once file has completed; Do we redirect or submit the form?

    function upload()
    {
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("progress").innerHTML=setInterval(function(){xmlhttp.responseText},500);
        }
      }
    xmlhttp.open("POST","upload_progress.php",true);
    xmlhttp.send();

    }

</script>
0
source

More articles:


All Articles