[英]Jquery file upload in rails 4
Hi everyone i am following the video tutorial for Jquery File Upload at http://railscasts.com/episodes/381-jquery-file-upload and am stuck. 大家好,我正在http://railscasts.com/episodes/381-jquery-file-upload上关注Jquery文件上传的视频教程,我被困了。 I after upload images my render partial does not refresh, it adds the new image and all other images under the image that was already attached.
我上传图像后,我的渲染部分不刷新,它将新图像和所有其他图像添加到已附加的图像下。 So if I add two images to a new item it shows the first image, then renders the partial again with the first image and the second image under the first so there are 3 photos in total.
因此,如果我将两个图像添加到新项目中,则显示第一个图像,然后使用第一个图像再次渲染局部图像,并在第一个图像下再渲染第二个图像,因此总共有3张照片。
Here is my create.js.erb 这是我的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 %>
Here is my render from my show page. 这是我的展示页面中的渲染。
<div id="photos">
<%= render 'photos/photo' %>
</div>
Here is my /photos/_photos.html.erb partial 这是我的/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>
Here is my Photos Controller create 这是我的照片控制器创建
def create
@rental = Rental.find(params[:rental_id])
@photo = @rental.photos.create(params[:photo].permit(:image))
respond_to do |format|
format.js
end
end
Here is my photos.js.jcoffee 这是我的照片.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 + '%')
Any help would be great, I'm stuck. 任何帮助都会很棒,我被困住了。 Thanks!
谢谢!
Thank you so much Rich Peck his answer fully solved my problem. 非常感谢Rich Peck,他的回答完全解决了我的问题。 I had to change
我不得不改变
<% if @photo.new_record? %>
alert("Failed to upload photo: <%= j @photo.errors.full_messages.join(', ').html_safe %>");
<% else %>
$("#photos").append("<%=j render @photo %>");
<% end %>
To 至
<% if @photo.new_record? %>
alert("Failed to upload photo: <%= j @photo.errors.full_messages.join(', ').html_safe %>");
<% else %>
$("#photos").html("<%=j render @photo %>");
<% end %>
def create
@rental = Rental.find(params[:rental_id])
@photo = @rental.photos.create(params[:photo].permit(:image))
respond_to do |format|
format.js
end
end
That's my first look at it 这是我第一次看到它
The fix was actually to use $('#photos').html()
to replace the container. 修复实际上是使用
$('#photos').html()
来替换容器。 The OP was originally using .append
to just append content to the container, which didn't work very well at all OP最初使用
.append
只是将内容附加到容器,这根本不起作用
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.