ajaxSubmit uploadprogress immer zurück 100

Question

Ich versuche, einen Fortschrittsbalken zu machen, um dem Benutzer zu zeigen, wie viel von der Datei hochgeladen wird, verwende ich ajaxSubmit und uploadprogress Funktion, aber diese Funktion aktualisiert es nicht nur gibt mir 100 und das es ist:

Hier meine JS-Code ist:

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); 
    } 
}); 

}

Hier ist mein Ruby und HTML-Code:

<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

Innen beforeSend: function(a,f,o) { add:

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

Quelle: JQuery ajax progress - HTML5

Answer 2

ich die Lösung für dieses Problem gefunden, hatte ich meinen Code auf den Server zu implementieren, war ich es auf meinem localhost versuchen, es das ist viel gab mir immer 100%