Upload Progress Using Pure PHP/Ajax

Upload progress using pure PHP/AJAX?

If you're able to add PECL packages into your PHP, there is the uploadprogress package.

The simplest way would be to just use swfupload, though.

File upload progress bar: is flash-based the only way possible

If PHP has the APC extension installed then you can use it to get upload progress reports via AJAX.

Upload progress using javascript only

I see now what you mean by "from scratch". I know of no way to do this that doesn't require some server-side fiddling.

If you have access to PHP 5.2 and can install additional modules, I think this is the closest you'll get regarding a step-by-step process:

What's new in PHP V5.2, Part 5: Tracking file upload progress

It requires APC but as I said, there is no "pure" PHP / Ajax solution as far as I know.

This question contains a number of additional interesting resources.

Creating a file progress bar in PHP

You can try YUI or Prototype or JQuery

PHP file upload - Track bytes uploaded with AJAX

there is a file upload progress extension for php, see http://www.ultramegatech.com/blog/2010/10/create-an-upload-progress-bar-with-php-and-jquery/ for how to use it.

File upload progress bar with jQuery

Note: This question is related to the jQuery form plugin. If you are searching for a pure jQuery solution, start here.
There is no overall jQuery solution for all browser. So you have to use a plugin. I am using dropzone.js, which have an easy fallback for older browsers. Which plugin you prefer depends on your needs. There are a lot of good comparing post out there.

From the examples:

jQuery:

$(function() {

    var bar = $('.bar');
    var percent = $('.percent');
    var status = $('#status');

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

html:

<form action="file-echo2.php" method="post" enctype="multipart/form-data">
    <input type="file" name="myfile"><br>
    <input type="submit" value="Upload File to Server">
</form>

<div class="progress">
    <div class="bar"></div >
    <div class="percent">0%</div >
</div>

<div id="status"></div>

you have to style the progressbar with css...

Session Upload Progress with JQuery

You have to upload the file with ajax and update the progress bar while it's uploading, not when it's done. http://jsfiddle.net/SwHf6/

$('input[type=file]').change(function() {
    var fd = new FormData();
    fd.append('file', $('input[type=file]').get(0).files[0]);

    $.ajax({
        url: '.',
        type: 'POST',
        processData: false,
        data: fd,
        xhr: function() {
            var xhr = $.ajaxSettings.xhr();
            xhr.upload.addEventListener('progress', function(ev) {
                $('.bar').css('width', (ev.loaded/(ev.total/100))+'%');
            }, false);

            return xhr;
        },
        beforeStart: function() {
            $('.bar').css('width', '0%');
        },
        success: function() {
            alert('done');
        }
    });
});

---

Related Topics