Jarla Jarla - 6 months ago 20
jQuery Question

Why is my page still loading although my progress bar indicates that the upload is already completed?

I have an Uploader with progress bar:

index.php:

<h1>Uploader</h1>
<hr>
<form action="#">
<input type="file" name="image">
<button class="btn btn-sm btn-info upload" type="submit">Upload</button>
<button type="button" class="btn btn-sm btn-danger cancel">Cancel</button>
<div class="progress progress-striped active">
<div class="progress-bar" style="width:0%"></div>
</div>
</form>
<script>
$(document).on('submit', 'form', function(e) {
e.preventDefault();
$form = $(this);
uploadImage($form);
});

function uploadImage($form) {
$form.find('.progress-bar').removeClass('progress-bar-success')
.removeClass('progress-bar-danger');

var formdata = new FormData($form[0]); //formelement
var request = new XMLHttpRequest();

//progress event...
request.upload.addEventListener('progress', function(e) {
var percent = Math.round(e.loaded / e.total * 100);
$form.find('.progress-bar').width(percent + '%').html(percent + '%');
});

//progress completed load event
request.addEventListener('load', function(e) {
$form.find('.progress-bar').addClass('progress-bar-success').html('upload completed....');
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
document.getElementById("result").innerHTML = request.responseText;
}
};
request.open("post", "upload.php");
request.send(formdata);
});

request.open('post', 'upload.php');
request.send(formdata);

$form.on('click', '.cancel', function() {
request.abort();

$form.find('.progress-bar')
.addClass('progress-bar-danger')
.removeClass('progress-bar-success')
.html('upload aborted...');
});

}
</script>


upload.php
:

<?php
$tmp_file = $_FILES['image']['tmp_name'];
$filename = $_FILES['image']['name'];
move_uploaded_file($tmp_file, 'files/'. $filename);

echo "result";
?>


My problem is, that the loading time of the progress bar takes
for example 10 seconds. Than I get the message "Upload completed" and
then it takes again 10 seconds until the new page is loaded.

Answer

There is two identical var declaration...
Try renaming the second request that is in the load listener.

var request = new XMLHttpRequest();

EDIT:

After a couple tries... It appeared that the second request is completely unusefull.

The resulting upload script:

function uploadImage($form){
    $form.find('.progress-bar').removeClass('progress-bar-success')
    .removeClass('progress-bar-danger');

    var formdata = new FormData($form[0]); //formelement
    $('#image').attr({ value: '' });            // <-- Removes the file from the input.
    var formdataWithoutFile = new FormData($form[0]);
    var request = new XMLHttpRequest();

    //progress event...
    request.upload.addEventListener('progress',function(e){
        var percent = Math.round(e.loaded/e.total * 100);
        $form.find('.progress-bar').width(percent+'%').html(percent+'%');
    });

    //progress completed load event
    request.addEventListener('load',function(e){
        $form.find('.progress-bar').addClass('progress-bar-success').html('upload completed....');
        request.onreadystatechange = function() {
            if (request.readyState == 4 && request.status == 200) {
                document.getElementById("result").innerHTML = request.responseText;
            }
        }
    });

    request.open('post', 'upload.php');
    request.send(formdata);

    $form.on('click','.cancel',function(){
        request.abort();

        $form.find('.progress-bar')
        .addClass('progress-bar-danger')
        .removeClass('progress-bar-success')
        .html('upload aborted...');
    });
}
Comments