AJAX सबमिट सबमिट करें प्रगति हमेशा 100

Question

मैं उपयोगकर्ता को दिखाने के लिए एक प्रगति पट्टी बनाने की कोशिश कर रहा हूं कि फ़ाइल कितनी फाइल अपलोड की गई है, मैं AJAX सबमिट और अपलोड प्रोग्रेस फ़ंक्शन का उपयोग कर रहा हूं, हालांकि यह फ़ंक्शन इसे अपडेट नहीं करता है, बस मुझे 100 देता है और यह है:

यहाँ मेरी जे एस कोड है:

<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> 

:

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

}

यहाँ मेरी रूबी और एचटीएमएल कोड है

Answer 1

अंदर beforeSend: function(a,f,o) { ऐड:

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

स्रोत: JQuery ajax progress - HTML5

Answer 2

मैं इस समस्या के लिए समाधान नहीं मिला, मैं सर्वर से मेरी कोड को तैनात करने के लिए किया था, मैं अपने स्थानीय होस्ट पर यह कोशिश कर रहा था कि यह तरीका है हमेशा मुझे 100%