ajaxSubmit uploadprogress 总是返回 100

Question

我正在尝试制作一个进度条来向用户显示上传了多少文件，我正在使用 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>

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%

Answer 3

试试这个

$.ajax({
        xhr : function() {
            var xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener('progress', function(e){
                if(e.lengthComputable){
                    //you can get percent here
                    var percent_total = Math.round((e.loaded / e.total) * 100);
                    //then do with your progress bar, i used bootstrap here
                    $('#theProgressBar').attr('aria-valuenow', percent_total).css('width', percent_total + '%').text(percent_total + '%');
                }
            });
            return xhr;
        },
        url: url,
        data: formdata,
        processData: false,
        contentType: false,
        type: 'POST',
        dataType: "json",
        success: function (response) {

        },
        err: function(err){

        }
});