我正在尝试创建一个进度条向用户显示文件的上传量,我使用的是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>
解决方法
在beforeSend中：function(a,o){add：
a.upload.addEventListener("progress",function(evt){
if (evt.lengthComputable) {
console.log(evt.loaded / evt.total);
}
},false);
资料来源：JQuery ajax progress – HTML5