javascript - ajax提交上传进度总是返回100

coder 2024-07-26 原文

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

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

来源:JQuery ajax progress - HTML5

关于javascript - ajax提交上传进度总是返回100，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28412947/

javascript ajax 34 gt lt jquery ruby-on-rails-4 jquery-forms-plugin

有关javascript - ajax提交上传进度总是返回100的更多相关文章

ruby - 为什么 4.1%2 使用 Ruby 返回 0.0999999999999996？但是 4.2%2==0.2 - 2
为什么4.1%2返回0.0999999999999996？但是4.2%2==0.2。最佳答案参见此处:WhatEveryProgrammerShouldKnowAboutFloating-PointArithmetic实数是无限的。计算机使用的位数有限(今天是32位、64位)。因此计算机进行的浮点运算不能代表所有的实数。0.1是这些数字之一。请注意，这不是与Ruby相关的问题，而是与所有编程语言相关的问题，因为它来自计算机表示实数的方式。关于ruby-为什么4.1%2使用Ruby返
ruby - 我可以使用 aws-sdk-ruby 在 AWS S3 上使用事务性文件删除/上传吗？ - 2
我发现ActiveRecord::Base.transaction在复杂方法中非常有效。我想知道是否可以在如下事务中从AWSS3上传/删除文件:S3Object.transactiondo#writeintofiles#raiseanexceptionend引发异常后，每个操作都应在S3上回滚。S3Object这可能吗？？最佳答案虽然S3API具有批量删除功能，但它不支持事务，因为每个删除操作都可以独立于其他操作成功/失败。该API不提供任何批量上传功能(通过PUT或POST)，因此每个上传操作都是通过一个独立的API调用完成的
ruby-on-rails - Rails - 乐观锁定总是触发 StaleObjectError 异常 - 2
我正在学习Rails，并阅读了关于乐观锁的内容。我已将类型为integer的lock_version列添加到我的articles表中。但现在每当我第一次尝试更新记录时，我都会收到StaleObjectError异常。这是我的迁移:classAddLockVersionToArticle当我尝试通过Rails控制台更新文章时:article=Article.first=>#我这样做:article.title="newtitle"article.save我明白了:(0.3ms)begintransaction(0.3ms)UPDATE"articles"SET"title"='dwdwd
ruby - 检查字符串是否包含散列中的任何键并返回它包含的键的值 - 2
我有一个包含多个键的散列和一个字符串，该字符串不包含散列中的任何键或包含一个键。h={"k1"=>"v1","k2"=>"v2","k3"=>"v3"}s="thisisanexamplestringthatmightoccurwithakeysomewhereinthestringk1(withspecialcharacterslike(^&*$#@!^&&*))"检查s是否包含h中的任何键的最佳方法是什么，如果包含，则返回它包含的键的值？例如，对于上面的h和s的例子，输出应该是v1。编辑:只有字符串是用户定义的。哈希将始终相同。最佳答案
ruby - Ruby 中的隐式返回值是怎么回事？ - 2
所以我开始关注ruby，很多东西看起来不错，但我对隐式return语句很反感。我理解默认情况下让所有内容返回self或nil但不是语句的最后一个值。对我来说，它看起来非常脆弱(尤其是)如果你正在使用一个不打算返回某些东西的方法(尤其是一个改变状态/破坏性方法的函数!)，其他人可能最终依赖于一个返回对方法的目的并不重要，并且有很大的改变机会。隐式返回有什么意义？有没有办法让事情变得更简单？总是有返回以防止隐含返回被认为是好的做法吗？我是不是太担心这个了？附言当人们想要从方法中返回特定的东西时，他们是否经常使用隐式返回，这不是让你组中的其他人更容易破坏彼此的代码吗？当然，记录一切并给出
jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2
rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送
ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2
我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？最佳答案参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司
ruby-on-rails - 有没有办法为 CarrierWave/Fog 设置上传进度指示器？ - 2
我在Rails应用程序中使用CarrierWave/Fog将视频上传到AmazonS3。有没有办法判断上传的进度，让我可以显示上传进度如何？最佳答案 CarrierWave和Fog本身没有这种功能；你需要一个前端uploader来显示进度。当我不得不解决这个问题时，我使用了jQueryfileupload因为我的堆栈中已经有jQuery。甚至还有apostonCarrierWaveintegration因此您只需按照那里的说明操作即可获得适用于您的应用的进度条。关于ruby-on-r
ruby-on-rails - ruby 日期方程不返回预期的真值 - 2
为什么以下不同？Time.now.end_of_day==Time.now.end_of_day-0.days#falseTime.now.end_of_day.to_s==Time.now.end_of_day-0.days.to_s#true 最佳答案因为纳秒数不同:ruby-1.9.2-p180:014>(Time.now.end_of_day-0.days).nsec=>999999000ruby-1.9.2-p180:015>Time.now.end_of_day.nsec=>999999998
ruby - 从 String#split 返回的零长度字符串 - 2
在Ruby1.9.3(可能还有更早的版本，不确定)中，我试图弄清楚为什么Ruby的String#split方法会给我某些结果。我得到的结果似乎与我的预期相反。这是一个例子:"abcabc".split("b")#=>["a","ca","c"]"abcabc".split("a")#=>["","bc","bc"]"abcabc".split("c")#=>["ab","ab"]在这里，第一个示例返回的正是我所期望的。但在第二个示例中，我很困惑为什么#split返回零长度字符串作为返回数组的第一个值。这是什么原因呢？这是我所期望的:"abcabc".split("a")#=>["bc"

javascript - ajax提交上传进度总是返回100

有关javascript - ajax提交上传进度总是返回100的更多相关文章

随机推荐