使用 rails 3、carrierwave 和 jquery 从模型中删除图像

Question

我正在使用 Carrierwave 添加图像并将其上传到 Amazon S3。这工作正常，一旦表单被保存，我会显示图像和一个 x 框来删除它。

我想使用 ajax 来处理点击时“x”图像上的点击事件我想删除图像并清除表单上的字段，以便再次显示输入字段

图像字段是我在表单中编辑的模型类的一个属性。

Person < ActiveRecord
 attr_accessible: image

我的表单这部分的部分显示图像（如果存在），否则显示输入文件字段（如果不存在）

<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) 从 pass 对象中清除输入字段 b) 提交更改（远程） c) 删除 S3 上的远程镜像 e) 重新显示图像的 file_input 字段，以便在需要时重新选择它

任何帮助或指点将不胜感激

更新

我已经部分工作以显示正确字段并调整输入链接。但我不确定如何从模型属性中实际删除文件

我已将部分更新为以下内容，显示创建文件按钮的图像

<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()

Answer 1

要删除文件，您可以利用remove_mounted_field_url carrierwave creates。

从这里我看到了两种解决方案，要么在控制器中创建一个只会删除文件的新操作，要么使用 update 操作。我喜欢尽可能多地使用原始操作（index/new/create ...），所以我将使用第二种解决方案。

您需要在单击 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 取自表单。我不认为这是个问题，因为在创建表单上还没有上传照片，所以没有什么要删除的。

最后，您可以使用siblings method 查找输入和图像