How to add progressbar to downloading file?

Question

I need help about this code. So I've wrote this code and now I need add progressbar and show downloaded file link after downloaded file to server... And how I can add it to this code? Thanks!

<html>
<p style="width: 70%;margin: auto;margin-top: 5%;font-size:larger;text-align:center">
Download Any Files From Any URL</p>
<form method="post" style="width: 70%;margin: auto;margin-top: 10%;">
<input name="url" size="50" placeholder="Please Enter Valid URL>>>" style="width: 100%;height: 10%;font-size: 1.5em;padding:10px" required>
<input name="submit" type="submit" value="Start Download" style="width: 30%;height: 10%;margin: 5% auto; display: block;">
<p style="width: 70%;margin: auto;margin-top: 10%;font-size:larger;text-align:center">
Your File Downloaded To <?php echo getcwd(); ?> Server</p>
<p style="width: 70%;margin: auto;font-size: smaller;text-align: center;position: fixed;bottom: 0;background: #fff;">
Powered by: <a href="#" target="_blank" style="color:#f60;text-decoration:none;">Developers</a></p>
</form>
<?php
    // maximum execution time in seconds
    // set_time_limit (24 * 60 * 60);
    if (!isset($_POST['submit'])) die();
    // folder to save downloaded files to. must end with slash
    $destination_folder = '';
    $url = $_POST['url'];
    $newfname = $destination_folder . basename($url);
    /*  // old script
    $file = fopen ($url, "rb");
    if ($file) { $newf = fopen ($newfname, "wb");
      if ($newf)
      while(!feof($file)) { fwrite($newf, fread($file, 1024 * 8 ), 1024 * 8 ); }
    }
    if ($file) { fclose($file); }
    if ($newf) { fclose($newf); }
    */
    file_put_contents( $newfname, fopen($url, 'r'));
?>
</html>

I need add progress bar and show link after files completed.

score -1 · Answer 1 · answered Feb 09 '17 at 07:01

w3 schools has a great example of a progress bar using bootstrap:

try this code in your browser.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Animated Progress Bar</h2>
  <p>The .active class animates the progress bar:</p> 
  <div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
      40%
    </div>
  </div>
</div>

</body>
</html>

the idea is that you change the aria-valuenow value as the download progresses. This would be done by using information from php about the percentage of the file that has been downloaded, and modifying that aria-valuenow to reflect the progress.

Thanks) I've tried this code but it doesn't work. Than when I run this script progress bar doesn't work. It stopped in 0% end thats all! Can you help me to add this example to my script? — oktam yoqubov, Feb 09 '17 at 07:17

How to add progressbar to downloading file?

1 Answers1