ajaxSubmit uploadprogress restituisce sempre 100

Question

Sto provando a fare una barra di avanzamento per mostrare all'utente quanto del file è stato caricato, sto usando la funzione ajaxSubmit e uploadprogress, tuttavia questa funzione non aggiorna semplicemente mi dà 100 e che è:

Ecco il mio codice JS:

function UploadImage(){ 
$('#new-post-upload-images').ajaxSubmit({ 
    dataType: "json", 
    beforeSend: function(a,f,o) { 
    $('input.images').unwrap().css('display','none'); 
    $('#new_post_overlay,#upload_plus,#upload_wrapper .edit-menu-post').remove(); 
    $(".new_post_btn").attr('disabled', true); 
    $(".load_new_post").show(); 
    }, 
    uploadProgress: function(event, position, total, percentComplete) { 
    console.log(percentComplete + '%'); 
    }, 
    complete: function(XMLHttpRequest, textStatus) { 
    var data= XMLHttpRequest.responseText; 
    var jsonResponse = JSON.parse(data); 
    $(".load_new_post").hide(); 
    $('#new_post_wrapper').append('<div class="edit-menu-post"><a class="delete dismiss_image dismiss icon-cancel" title="Remove"><span>Delete</span></a><a class="repos-drag icon-drag" title="Reposition"><span>Reposition</span></a></div><div style="width:100%;height:100%;background-repeat: no-repeat;background-size: cover;position: relative;" id="preview"></div>').parent().find('.bg-port').val('0px 0px'); 
    $('#preview').css('background-position', '0 0').css('background-image', 'url(' + jsonResponse[0]["path"] + ')'); 
    var ids = $.map(jsonResponse, function(n){ 
     return n["id"]; 
    }); 
    $('#uploaded_images_ids').val(ids.join("#")); 
    $(".new_post_btn").attr('disabled', false); 
    } 
}); 

}

Ecco la mia Ruby e codice HTML:

<div id="upload_wrapper"> 

    <%= form_tag(upload_images_path, :multipart => true, method: :post ,id: "new-post-upload-images") do %> 
    <div class="new_photo_viewport"> 
    <div class="load_new_post" style="340px"> 
    <div><h2>Uploading <%= image_tag("ajax-loader2.gif") %></h2></div> 
    </div> 
    <div class="new_post_error edit-menu-post" style="background-color: #fff;"> 
     <span><b>Recommendation:</b> Picture dimensions should be at least 800 x 600 for better quality and the size doesn't exceed 12MB</span> 
    </div> 
    <div id="new_post_wrapper" class="new_post_viewport" style="display:block;width:100%;height:100%;"> 
     <div class="add_image_button" id="new_post_overlay"> 
     <span class="icon-camera" id="upload_plus"><br><span>Upload</span></span> 
     <%= file_field_tag "images[]", type: :file, accept: "image/*" ,class: "images" %>  
     </div> 
    </div> 
    </div> 
    <% end %> 
</div> 

Answer 1

All'interno beforeSend: function(a,f,o) { aggiuntivo:

a.upload.addEventListener("progress", function(evt){ 
    if (evt.lengthComputable) { 
    console.log(evt.loaded/evt.total); 
    } 
}, false); 

Fonte: JQuery ajax progress - HTML5

Answer 2

Ho trovato la soluzione per questo problema, ho dovuto distribuire il mio codice al server, ho cercato sul mio localhost che è modo in cui mi ha sempre dato 100%