Loading formulario

[BaSingSe]

Con esto he conseguido el precargador, lo vi en un video el problema viene ahora asi..

Este es el codigo con el que hice el cargador, que por cierto solo me carga una imagen a la vez :( y en el formulario envio varias..

Código Javascript:

//Create REPORT
    $('#reporte').submit(function(e){
 
        e.preventDefault(); 
        $form = $('#reporte');
        
        $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....');
            });
 
            request.open('post', '../model/report_model.php?form=create"');
            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...');
            });
 
    })//--create REPORT
 

Estuve viendo un poco de como adaptarlo para usar la funcion succes que seria algo como esto, porque no me quedo muy claro

Código Javascript:

$('#reporte').submit(function(e){
 
        e.preventDefault(); 
        $form = $('#reporte');
        
        $form.find('.progress-bar').removeClass('progress-bar-success').removeClass('progress-bar-danger');
 
        
        $.ajax({
            xhr: function(){
                //var xhr = new window.XMLHttpRequest();
                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.open('post', '../model/report_model.php?form=create"');
                request.send(formdata);
 
               return xhr;
            },
            success:function(){
                $('.msg').html('');
                if (data.status == 0) {
                    $('.msg').html("<div class='alert alert-danger fade in'><a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a><b><span id='message'></span></b></div>");
                    for (var i = 0; i < data.msg.length; i++) {
                        $('#message').append("- "+data.msg[i]+"<br>");
                    }
                }else if(data.status == 1){
                    $('.msg').html("<div class='alert alert-warning fade in'><a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a><b><span id='message'></span></b></div>");
                    $('#message').append(data.msg);
                }else if(data.status == 2){
                    $('#reporte')[0].reset();
                    $('.msg').html("<div class='alert alert-success fade in'><a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a><b><span id='message'></span></b></div>");
                    $('#message').append(data.msg);
                    $('body,html').animate({scrollTop : 200}, 500);
                     return false;
                }
            }
        })
    })//--create REPORT
 

Pero entonces no me funciona no lanza error no nada..