繁体   English   中英

用户上传照片后如何自动刷新?

[英]How to auto refresh after user uploads a photo?

因此,我有一个应用程序,允许用户上传照片并使用Jquery Crop插件进行裁剪。 但是,当他们裁剪并按保存时,只有刷新两次,您才能看到更新的裁剪图像。 上传完照片后,以及当用户单击“保存在裁切上”时,我想自动刷新页面。

然后,这应显示新裁剪的图像,而不是较旧的未裁剪的图像。

我该怎么办?

这是照片控制器:

class PhotosController < ApplicationController
  before_filter :authenticate_user!

  def show
    @photo = Photo.find(params[:id])
  end

  def new
  end

  def create
    @photo = current_user.photos.create(params[:photo])
  end

  def destroy
    @photo = current_user.photos.find(params[:id])
    @photo.destroy
  end

  def update
    @photo = current_user.photos.find(params[:id])

    respond_to do |format|
      if @photo.update(params[:photo])
        format.js
        format.json { respond_with_bip(@photo) }
      else
        format.js
        format.json { respond_with_bip(@photo) }
      end
    end
  end

  def add_as_profile
    @photo = current_user.photos.find(params[:id])
    if @photo.present?
      current_profile_pic = current_user.profile_photo
      if current_profile_pic.present?
        current_profile_pic.update_attributes(profile_photo: false)
      end

      @photo.update_attributes(profile_photo: true)
      notice = 'Profile picture updated'
    else
      notice = 'Photo not found!'
    end

    redirect_to :back, notice: notice
  end

  private
  # Never trust parameters from the scary internet, only allow the white list through.
  #not needed with protected_attributes gem
  #def photo_params
  #  params.require(:photo).permit(:file, :attachable_id, :attachable_type, :image)
  #end
end

照片部分(_photo.html.erb)

<li class='photo_<%= photo.id %>'>
  <%= photo.profile_photo? ? '(current profile photo)' : '' %>
  <%= link_to photo, remote: true do %>
  <div class="photo_frame" id="frame_<%= photo.id %>" style="background-image: url('<%= photo.file.url(:large) %>');">
    <%#= link_to image_tag(photo.file.large.url), photo, remote: true %>
    </div>

   <% end %>

  <br />
  <% if controller_name == 'home' && action_name == 'welcome' %>
  <p class="summary-info"><%= best_in_place photo, :description, type: :textarea, nil: 'Enter a Caption' %></p>
  <%= form_tag add_as_profile_photo_path(photo), class: 'form-inline', method: :put do %>
    <%= button_tag 'Set as profile picture', class: 'btn btn-primary btn-lg photo-b' %>
  <% end %>
  <%= link_to "delete", photo, data: { confirm: 'Are you sure?' }, :method => :delete, remote: true, class: 'btn btn-primary btn-lg photo-b' %>
  <div class="photo-up-down"> <a href="#">up</a> <a href="#">down</a> </div>
  <% else %>
  <p class="summary-info"><%= photo.description.present? ? photo.description : '-' %></p>
  <% end %>
 </li>

update.js

$( document ).ajaxStart(function() {
  $( ".crop_message" ).html('Processing ....');
});

// $( document ).ajaxComplete(function() {
  // $( ".crop_message" ).html('');
  imageUrl = '<%= @photo.file.url(:large) %>'
  $('#frame_<%= @photo.id %>').css("background-image", 'url(' + imageUrl + ')');
// });
$('#myModal').modal('hide');

您可以使用location.reload(true);在javascript中重新加载页面location.reload(true);
true内部location.reload()将强制页面硬刷新,而不是从缓存中获取。)
但是,您应该考虑解决方案的另一种选择。

您可以使用location.reload();

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM