我想製作一個進度條來顯示用戶上傳了多少文件,我使用的是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>
任何人都可以解答這個問題嗎? – 2015-02-15 10:43:09
驚喜沒有人迴應這個話題呢。 – 2015-05-27 09:18:01