how to reload page after uploading images

问题

I use gem 'jquery-fileupload-rails' and 'carrierwave_backgrounder' gem with sidekiq. How to add reload the page after download is complete?

The problem is that the download is in the background and the page is reloaded immediately, not when the images loaded

fileupload.js

  $(function () {
      $('#new_photo').fileupload({
          acceptFileTypes: '/(\.|\/)(gif|jpe?g|png)$/i',
          dataType: 'html',
          add: function (e, data) {
              data.context = $('#loading').css({display:"block"}).appendTo('#photos');
              data.submit();
          },
          done: function (e, data) {
              data.context.text('Upload finished.');
              location.reload();
          }
      });
  });

image_upload.html.erb

  <div class="upload" id="new_photo">
    <%= form_for([@project, current_user.photos.new]) do |f| %>
      <%= file_field_tag :image, multiple: true, name: "photo[image]" %>
      <%= link_to 'Save', @project, :class => 'btn btn-success' %>
    <% end %>
    <div id="loading">
      <h4>Loading</h4>
    </div>
  </div>
  <div class="image-upload">
    <% @project.photos.each do |photo| %>
      <%= image_tag photo.image_url.to_s %>
      <p><%= link_to "Delete", project_photo_path(@project, photo), :method => :delete, :class => 'btn' %></p>
    <% end %>
  </div>

回答1:

from the jquery fileuploader documentation on callbacks, you can bind a success event that will be triggered after upload finishes.

jqXHR = data.submit()
  .success(function() { window.location.reload() })

回答2:

simply just remove the location.reload from Done section and check if the image loaded $("#image") then hit window.location.reload

回答3:

I think you can try to use Ajax in your javascript function. After the download is completed then trigger an ajax call into controller/method and your method will automatic render the page back to the view again. The reason you call back to controller may help you grand all the instant variables to your view.

$.ajax({
 url: 'controller/method',
 type: 'post',
 data: 'YOUR DATA or Nothing',
 success: function(data) {}   
});

If you don't need success function then you just use url and post. Try some and you will be able to figure it out.

来源：https://stackoverflow.com/questions/18437075/how-to-reload-page-after-uploading-images

标签

jquery

ruby-on-rails

carrierwave

sidekiq