0

私はCarrierwaveを使用して、AmazonS3に画像を追加およびアップロードしています。これは問題なく機能します。フォームを保存したら、画像とxボックスを表示して削除します。

ajaxを使用して、クリック時の「x」画像のクリックイベントを処理したい画像を削除してフォームのフィールドをクリアし、入力フィールドが再び表示されるようにします

画像フィールドは、フォームで編集しているモデルクラスの属性です。

Person < ActiveRecord
 attr_accessible: image

フォームのこの部分の部分は、存在する場合は画像を表示し、存在しない場合は入力file_fieldを表示します

<div class="field">
    <%= image_tag @pass.background_image_url(:thumb) if @pass.background_image? %>
    <%= f.file_field :background_image if @pass.background_image.to_s == '' %>
    <%= content_tag :div, '', class: "delete_image_fields" if @pass.background_image? %>
</div>

画像フィールドをうまく隠すことができるjqueryがいくつかあります。

jQuery ->

  $('.field .delete_image_fields').click ->
  $(this).parent().find('img').hide()
  event.preventDefault()

画像フィールドは問題なく非表示になります

私がしたいのは

a）パスオブジェクトから入力フィールドをクリアしますb）変更を（リモートで）送信しますc）S3でリモートイメージを削除しますe）必要に応じて再選択できるように、イメージのfile_inputフィールドを再表示します

ヘルプやポインタをいただければ幸いです

アップデート

これは、corectフィールドを表示し、入力リンクを調整するために部分的に機能しています。しかし、モデル属性から実際にファイルを削除する方法がわかりません

パーシャルを次のように更新しました。これは、画像またはファイルの作成ボタンのいずれかを表示します。

<div class="field">
  <%= f.label :background_image %><br />
  <% if @pass.background_image?%>
     <%= image_tag @pass.background_image_url(:thumb)  %>
     <%= f.file_field :background_image , style: "display:none"%>
     <%= content_tag :div, '', class: "delete_image_fields" %> 
  <% else %>
     <%= f.file_field :background_image%>       
  <% end %>

私のjqueryをこれに更新しました

$('.field .delete_image_fields').click ->
  $(this).parent().find('img').hide()
  $(this).hide()
  $(this).parent().find('input').val('')
  $(this).parent().find('input').show()
  event.preventDefault()
4

1 に答える 1

1

ファイルを削除するには、remove_mounted_field_url carrierwaveの create を利用できます。

ここから、コントローラーでファイルのみを削除する新しいアクションを作成するか、アクションを使用するかの 2 つの解決策が表示されますupdate。元のアクション (index/new/create ...) を可能な限り使用したいので、2 番目のソリューションを使用します。

X ボックスをクリックするときは、 AJAX PUT リクエストを実行する必要があります。ここでは、次のようになります。

$('.field .delete_image_fields').click ->
  $(this).parent().find('img').hide()
  $(this).hide()
  $(this).parent().find('input').val('')
  $(this).parent().find('input').show()
  event.preventDefault()
  $.ajax
    url: $(this).getParents('form').first().attr('action')
    method: 'PUT'
    data:
      person:
        remove_image: 1 # This will trigger the carrier wave function that remove the uploaded file
  .done (data) ->
      # You can do plenty if things here, for instance notify the user it's been correctly deleted

更新アクションを対象とする必要がある AJAX クエリの URL はフォームから取得されるため、これは編集フォームでのみ機能することに注意してください。作成フォームにはまだ写真がアップロードされていないため、削除するものは何もないため、これは問題ではないと思います。

最後に、兄弟メソッドを使用して、入力と画像の両方を見つけることができます

于 2012-11-02T18:24:03.260 に答える