如何使用jQuery异步更新图像？

我使用gem jquery-fileupload-rails和dragonfly。

我选择要加载的图片，图片仅在重新加载页面后才在页面上更改。 update.js.erb有什么问题？

自由职业者/ edit.html.erb

<%= form_for @photo, url: {controller: 'photos', action: 'update'}, html: { class: "form_avatar" }, remote: true do |f| %> 
     <div class="field user-avatar_upload"> 
      <%= render partial: 'photos/photo' %> 
     </div> 
     <%= f.hidden_field :id, value: @photo.id %> 
     <div class="btn-group_avatar"> 
     <div class="btn_bordered"> 
      <%= f.file_field :avatar, required: true, multiple: true, name: 'photo[avatar]' %>  
     <span>Load avatar</span> 
     </div> 

     </div> 

    <% end %> 
<script> 
    $(document).ready(function() { 
    $('.form_avatar').fileupload({dataType: 'script'}); 
    }); 
</script>

_photo.html.erb

<div class="avatar" id="dropzone"> 
    <%= image_tag @photo.avatar.url, class: "avatario" %> 
</div>

PhotosController.rb

class PhotosController < ApplicationController 
    before_action :set_photo, only: [:update, :delete] 


    def update 
     @photo.update(photo_params) 

    end 

    def delete 

    end 


    protected 

    def photo_params 
     params.require(:photo).permit(:avatar, :id)  
    end 

    def set_photo 
     @photo = Photo.find(photo_params[:id]) 
    end 
end

update.js.erb

$('.field user-avatar_upload').html('<%= j render 'photos/photo' %>');

日志

DRAGONFLY: shell command: 'identify' '-ping' '-format' '%m %w %h' '/home/ubuntu/workspace/RackMultipart20160407-1375-158gos0.jpg' 
    SQL (0.4ms) UPDATE "photos" SET "avatar_uid" = ?, "updated_at" = ? WHERE "photos"."id" = ? [["avatar_uid", "2016/04/07/8esl7t8zdp_Users_dborovsky_PortraitUrl_100.jpg"], ["updated_at", 2016-04-07 11:51:22 UTC], ["id", 3]] 
    (13.9ms) commit transaction 
    Rendered photos/_photo.html.erb (1.3ms) 
    Rendered photos/update.js.erb (4.1ms) 
Completed 200 OK in 186ms (Views: 31.8ms | ActiveRecord: 15.2ms)

来源

2016-04-07 Stefan Hansch

你需要一个respond_to块添加到您的update方法。

def update 
    @phone.update(photo_params) 

    respond_to do |format| 
    format.js 
    end 
end

现在，当表单通过AJAX提交控制器将返回你update.js.erb模板，以正确的内容类型

来源

2016-04-07 10:47:33

我加了，叫update.js，但不加载新的文件与阿贾克斯。我认为问题在update.js.erb。 –

当你添加一个文件时，你在日志中得到了什么？ –

DRAGONFLY：shell命令：'identify''-ping''-format''％m％w％h''/home/ubuntu/workspace/RackMultipart20160407-1375-158gos0.jpg' SQL（0.4ms）UPDATE“photos “SET”avatar_uid“=？，”updated_at“=？ WHERE“photos”。“id”=？ [[“avatar_uid”，“2016/04/07/8esl7t8zdp_Users_dborovsky_PortraitUrl_100.jpg”]，[“updated_at”，2016-04-07 11:51:22 UTC]，[“id”，3]] （13.9ms）（1.3ms）渲染后的照片/ update.js.erb（4.1ms）在186毫秒内完成200 OK（查看：31.8ms | ActiveRecord：15.2ms） –

如何使用jQuery异步更新图像？

回答

相关问题