Welcome Guest, Not a member yet? Register   Sign In
Codeigniter file upload ajax Question
#1

I have this ajax code below I would like to be able to hide the once the progress bar has reached 100 %;

Not sure where best to place it.

$('.progress').show();


Code:
var inputFile = $('input[name=file]');
var uploadURI = "<?php echo base_url('question/ask/upload_attachment');?>";
var progressBar = $('#progress-bar');

$('#button-upload input[name="file"]').on('change', function() {

    var fileToUpload = inputFile[0].files[0];    

    if (fileToUpload != 'undefined') {
        // provide the form data
        // that would be sent to sever through ajax
        var formData = new FormData();
        formData.append("file", fileToUpload);

        // now upload the file using $.ajax
        $.ajax({
            url: uploadURI,
            type: 'post',
            data: formData,
            processData: false,
            contentType: false,
                success: function() {
            },
            xhr: function() {
                var xhr = new XMLHttpRequest();
                xhr.upload.addEventListener("progress", function(event) {
                    if (event.lengthComputable) {
                            var percentComplete = Math.round( (event.loaded / event.total) * 100 );
                            // console.log(percentComplete);
                            
                            $('.progress').show();
                            
                            progressBar.css({width: percentComplete + "%"});
                            progressBar.text(percentComplete + '% completed');

                        };
                    }, false);

                return xhr;
            }
        });
    }

});
There's only one rule - please don't tell anyone to go and read the manual.  Sometimes the manual just SUCKS!
Reply




Theme © iAndrew 2016 - Forum software by © MyBB