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

函数UploadImage（）{
$（“#新上传后图像”）.ajaxSubmit({
数据类型：“json”，
发送前：函数（a、f、o）{
$（'input.images'）.unwrap（）.css（'display'，'none'）；
$（“#新建发布覆盖，#上载增强，#上载包装。编辑菜单发布”）.remove（）；
$（“.new\u post\u btn”）.attr（'disabled'，true）；
$（“.load\u new\u post”）.show（）；
},
上载进度：功能（事件、位置、总数、完成百分比）{
console.log（完成百分比+'%'）；
},
完成：函数（XMLHttpRequest，textStatus）{
var data=XMLHttpRequest.responseText；
var jsonResponse=JSON.parse（数据）；
$（“.load\u new\u post”）.hide（）；
$（'new'u post'u wrapper'）.append（'DeleteReposition'）.parent（）.find（'.bg port'）.val（'0px 0px'）；
$（'#preview'）.css（'background-position'，'0'）.css（'background-image'，'url（'+jsonResponse[0][“path”]+'））；
var id=$.map（jsonResponse，函数（n）{
返回n[“id”]；
});
$（'#上传的_图像_id'）.val（ids.join（“#”））；
$（.new\u post\u 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>

true，method:：post，id:“新帖子上传图像”）do%>
上传
建议：图片尺寸应至少为800 x 600，以获得更好的质量，并且大小不超过12MB

上传

内部

发送前：函数（a，f，o）{

添加：

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

---

来源：

我找到了这个问题的解决方案，我必须将我的代码部署到服务器上，我在本地主机上尝试，这是它总是给我的

100%

试试这个

$.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){

        }
});

---

有人能回答这个问题吗？令人惊讶的是，现在还没有人回复这个帖子。请不要只发布代码作为答案，还要解释代码的作用以及它是如何解决问题的。带有解释的答案通常更有帮助，质量更好，更容易吸引选民