1

我创建了具有画廊的 Rails 应用程序。现在我愿意有画廊封面照片。我想使用模态更新封面照片。上传我使用回形针的照片。

这是我的模型：

class Gallery < ActiveRecord::Base
   has_attached_file :cover_url, :styles => { :small => "108x76" }

  validates_attachment_content_type :cover_url, :content_type => ['image/jpeg', 'image/jpg', 'image/png']
end

这是我的控制器：

def update
puts params
respond_to do |format|
  if @gallery.update(gallery_params)
    format.html { redirect_to galleries_galleryhome_path(id: params[:id]), notice: 'Gallery was successfully updated.' }
    format.json { render :show, status: :ok, location: @gallery }
  else
    format.html { render :edit }
    format.json { render json: @gallery.errors, status: :unprocessable_entity }
  end
end
end

def gallery_params
  params.require(:gallery).permit(:name, :shoot_date, :release_date, :expiration_date, :archive,:gallery_layout_id, :contact_id,:status, :cover_url).merge(brand_id: current_brand.id,user_id: current_user.id)
end

这是我的观点：

<div class="cover-photo default  pull-left">
          <% if @find_gallery.cover_url.present?%>
          <%=image_tag @find_gallery.cover_url.url(:small)%>
          <%end%>
        </div>
        <div class="icon-cta" data-toggle="modal" data-target="cover_modal">

          <% if @find_gallery.cover_url.present? %>
          <%=link_to "Add<br>Cover".html_safe, "#profile-change" ,'data-toggle': "modal", class: "change-cover"%>

          <% else %>
          <%=link_to "Add<br>Cover".html_safe, "#album-title-popup" ,'data-toggle': "modal", class: "change-cover"%>
          <% end %>

        </div>


<!-- Album Cover Modal -->
<div class="modal fade" id="profile-change" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="myModalLabel">Album Cover</h4>
  </div>
  <%= form_for @gallery_cover,html: {multipart: true}, url: {controller: "galleries", action: "update", id: params[:id]}, method: :patch do |f| %>
  <%= label_tag "photo"%>
  <div class="modal-body">
    <%= f.hidden_field :cover_url,id: "hidden_cover_url"%>
    <div class="empty stack">
      <%= image_tag @find_gallery.cover_url.url,size: "355x237",id: "changecover"%>
    </div>
  </div>
  <div class="modal-footer pull-left">
    <button data-toggle="modal" data-target="#album-title-popup" data-dismiss="modal" type="button" class="btn btn-default"><span class="fa fa-trash set-stack"></span>Remove</button>
    <button data-toggle="modal" data-target="#album-add-cover" data-dismiss="modal" type="button" class="btn btn-default"><span class="fa fa-picture-o set-stack"></span>Change</button>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
    <%= f.submit "Save"%>
  </div>
  <%end%>
</div>
 </div>
</div>



<!-- Add Album Photo Modal -->
<div class="modal fade" id="album-add-cover" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="myModalLabel">Add Cover</h4>
  </div>
  <div class="modal-body">

    <%= form_for @gallery_cover,html: {id: "Cover-Upload"}, url: {controller: "galleries", action: "update", id: params[:id]}, method: :patch do |f| %>
    <ul class="source-links">
      <li class="js-cover-flow-upload">
        <span class="btn btn-file">
          <p>Upload From Computer</p>
          <%=f.file_field :cover_url, id: "Computer-Upload", onchange: "document.getElementById('hidden_cover_url').val = window.URL.createObjectURL(this.files[0])" %>
          <%= f.hidden_field :id, value: params[:id]%>
        </span>
        <span class="fa  fa-caret-right pull-right"></span>
      </li>
      <li class="js-cover-flow-random">
        <span class="btn btn-file">
          <p>Choose From Gallery</p>
        </span>
        <span class="fa  fa-caret-right pull-right"></span>
      </li>
    </ul>
    <%= image_tag "image",id: "sample"%>
    <%= f.submit "Save", style: "display:none;",id: "Pc"%>
    <% end %>
  </div>
</div>

正如您在上面看到的，有两种模式。单击Add Cover链接#profile-change模式将打开。这个模态有 button Change。单击此按钮后，它将打开第二个模态，即#album-add-cover模态。在第二个模式中，我可以选择要上传的图像。一旦我选择了照片，我应该被重定向到第一个模态，并在第二个模态上选择值，这样我就可以在第一个模态上提交表单时更新画廊的封面照片。

这是我写的脚本：

 function updatecover(input){
  if (input.files) {
var reader = new FileReader();
reader.readAsDataURL(input.files[0]);
reader.onload = function (e) {
  $("#changecover").attr('src', e.target.result);
    }
  }
}
$("#Computer-Upload").change(function(){
  updatecover(this);
  alert($(this).val());
  $("#changecover").attr("src",$(this).val());
  // $("#Pc").click();
});

上面的脚本在第一个模式上显示选定的文件，但是在保存照片时它给了我以下错误：

回形针::AdapterRegistry::NoHandlerError in GalleriesController#update

它正在更新配置文件图片而不加载第一个模式。请问有人可以帮助我吗？先感谢您。

4

0 回答 0