0

我正在使用 Carrierwave 添加图像并将其上传到 Amazon S3。这工作正常，一旦表单被保存，我会显示图像和一个 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) 从 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()
4

1 回答 1

1

要删除文件，您可以利用remove_mounted_field_url carrierwave 创建的.

从这里我看到了两种解决方案，要么在控制器中创建一个只会删除文件的新动作，要么使用该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 取自表单。我不认为这是一个问题，因为在创建表单上还没有上传照片，所以没有什么可以删除的。

最后一件事，您可以使用兄弟姐妹方法来查找输入和图像

于 2012-11-02T18:24:03.260 回答