php file upload with a progressbar or number of percent

Question

I want to use a file upload progress. Can anybody give possible simple code for showing upload progess bar. On the next code. There is file receiving file upload.php

<?php
if ($_FILES) {
    foreach ($_FILES as $k => $v) {
        if ($v["error"] > 0) {
            echo "Error: " . $_FILES["file"]["error"] . "<br>";
        } else {
            echo "Upload: " . $v["name"] . "<br>";
            echo "Type: " . $v["type"] . "<br>";
            echo "Size: " . ($v["size"] / 1024) . " kB<br>";
            echo "Stored in: " . $v["tmp_name"]. "<br><br>";
        }
    }
    return;
}
?>

And there is a html with file upload form.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Upload</title>
    </head>
    <body>
        <form action="upload.php" method="post" enctype="multipart/form-data">
            <label for="f1">Filename:</label>
            <input type="file" name="f1" id="f1"><br>
            <label for="f2">Filename:</label>
            <input type="file" name="f2" id="f2"><br>
            <input type="submit" name="submit" value="Submit">
        </form>
    </body>
</html>

Thank you

maybe you can just handle it on the javascript side... see http://stackoverflow.com/questions/15410265/file-upload-progress-bar-with-jquery — smarques, May 14 '13 at 08:44

score 0 · Answer 1 · answered May 14 '13 at 09:35

The easiest way to do it is to use jQuery uploadify plugin, which includes swfobject and shows file upload progress bar. And it's a beautiful way of uploading multiple files.

jQuery uploadify plugin:

http://www.uploadify.com/

If you want to do it your own way you need server-side compatibility, some nginx or apache2 module that can handle upload progress. And your client-side should make a requests to server during all upload process to get all information about it.

score 0 · Answer 2 · answered Feb 14 '16 at 16:45

You can use jQuery form plugin to achieve this. Just add jQuery Form plugin to your page head section. And you can use the following code.

$(function() {
 $(document).ready(function(){
 var percent = $('#percent');
 var status = $('#status');
 $('form').ajaxForm({
 beforeSend: function() {
 status.empty();
 var percentVal = '0%';
 percent.html(percentVal);
 },
 uploadProgress: function(event, position, total, percentComplete) {
 var percentVal = percentComplete + '%';
 percent.html(percentVal);
 },
 complete: function(xhr) {
 status.html(xhr.responseText);
}
 });
});
});

I got it from this File Upload Progress Bar Tutorial. And it is working absolutely fine.

php file upload with a progressbar or number of percent

2 Answers2