7

大家好，我正在关注http://railscasts.com/episodes/381-jquery-file-upload上的 Jquery 文件上传视频教程，但我被卡住了。我上传图像后，我的渲染部分不会刷新，它会在已附加的图像下添加新图像和所有其他图像。因此，如果我将两张图像添加到一个新项目中，它会显示第一张图像，然后使用第一张图像和第二张图像再次渲染部分图像，因此总共有 3 张照片。

这是我的 create.js.erb

<% if @photo.new_record? %>
  alert("Failed to upload photo: <%= j @photo.errors.full_messages.join(', ').html_safe %>");
<% else %>
  $("#photos").append("<%=j render @photo %>");
<% end %>

这是我的展示页面的渲染。

<div id="photos">
    <%= render 'photos/photo' %>
</div>

这是我的 /photos/_photos.html.erb 部分

<h2>Images</h2>
<div class="photo">
<% @rental.photos.each do |photo| %>
  <p>
    <strong>Photo:</strong>
    <%= image_tag photo.image_url.to_s %>
    </script>   
  </p>
 <% end %>
</div>

这是我的照片控制器创建

 def create
    @rental = Rental.find(params[:rental_id])
    @photo = @rental.photos.create(params[:photo].permit(:image))

    respond_to do |format|
      format.js
    end
  end

这是我的 photos.js.jcoffee

jQuery ->
  $('#new_photo').fileupload(replaceFileInput: false,
    paramName: 'photo[image]')


    dataType: "script"
    add: (e, data) ->
      types = /(\.|\/)(gif|jpe?g|png)$/i
      file = data.files[0]
      if types.test(file.type) || types.test(file.name)
        data.context = $(tmpl("template-upload", file))
        $('#new_photo').append(data.context)
        data.submit()
      else
        alert("#{file.name} is not a gif, jpeg, or png image file")
    progress: (e, data) ->
      if data.context
        progress = parseInt(data.loaded / data.total * 100, 10)
        data.context.find('.bar').css('width', progress + '%')

任何帮助都会很棒，我被困住了。谢谢！

非常感谢 Rich Peck，他的回答完全解决了我的问题。我不得不改变

<% if @photo.new_record? %>
  alert("Failed to upload photo: <%= j @photo.errors.full_messages.join(', ').html_safe %>");
<% else %>
  $("#photos").append("<%=j render @photo %>");
<% end %>

至

<% if @photo.new_record? %>
  alert("Failed to upload photo: <%= j @photo.errors.full_messages.join(', ').html_safe %>");
<% else %>
  $("#photos").html("<%=j render @photo %>");
<% end %>
4

1 回答 1

2 
def create
    @rental = Rental.find(params[:rental_id])
    @photo = @rental.photos.create(params[:photo].permit(:image))

    respond_to do |format|
        format.js
    end
end

这是我第一次看

该修复程序实际上是用于$('#photos').html()替换容器。OP 最初.append只是用来将内容附加到容器中，这根本不能很好地工作

于 2013-10-18T08:37:35.540 回答