2015-02-09 118 views
7

我想製作一個進度條來顯示用戶上傳了多少文件,我使用的是ajaxSubmit和uploadprogress函數,但是這個函數並沒有更新它只是給了我100而且那個是:ajaxSubmit uploadprogress總是返回100

這裏是我的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); 
    } 
}); 

}

這裏是我的Ruby和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> 
+1

任何人都可以解答這個問題嗎? – 2015-02-15 10:43:09

+0

驚喜沒有人迴應這個話題呢。 – 2015-05-27 09:18:01

回答

0

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

0

我發現這個問題的解決方案,我有我的代碼部署到服務器,我是想它在我的本地也就是說方式,總是給我100%