Question

我正在使用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字段，以便在需要时重新选择

任何帮助或指示都将不胜感激

更新

我已经部分工作以显示核心字段并调整输入链接。但我不确定如何从模型属性

中实际删除该文件

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

<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查找输入和图像

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

1 个答案: