我正在使用dropzonejs并且它在服务器中工作,它保存,当我点击删除按钮时,它从服务器中删除。但唯一的问题是,当我点击删除按钮时,图片会停留在页面上。我认为这是因为jquery代码。但我无法解决它。
这里;
<div class="container">
<%= form_for [@boat, @picture], html: { multipart: true, url: wizard_path, class: "dropzone", id: "picture-dropzone"} do |f| %>
<p>
<div class="fallback">
<%= f.file_field :image %>
</div>
</p>
<% end %>
<p><%= link_to "Back to My Profile", current_user %></p>
<div class="index">
<%= render "index" %>
</div>
<script type="text/javascript">
$(document).ready(function(){
// disable auto discover
Dropzone.autoDiscover = false;
// grap our upload form by its id
$("#picture-dropzone").dropzone({
// restrict image size to a maximum 5MB
maxFilesize: 5,
// changed the passed param to one accepted by
// our rails app
paramName: "picture[image]",
acceptedFiles: "image/*",
// show remove links on each image upload
addRemoveLinks: false,
// if the upload was successful
success: function(file, response){
// find the remove button link of the uploaded file and give it an id
// based of the fileID response from the server
$(file.previewTemplate).find('.dz-remove').attr('id', response.fileID);
$(file.previewTemplate).find('.dz-remove').attr('boat_id', response.boatID);
// add the dz-success class (the green tick sign)
$(file.previewElement).addClass("dz-success");
},
//when the remove button is clicked
removedfile: function(file){
// grap the id of the uploaded file we set earlier
var id = $(file.previewTemplate).find('.dz-remove').attr('id');
var boat_id = $(file.previewTemplate).find('.dz-remove').attr('boat_id');
// make a DELETE ajax request to delete the file
$.ajax({
type: 'DELETE',
url: '/boats/' + boat_id + '/pictures/' + id,
success: function(file){
removeFile(file); // THIS DOES NOT WORK
//SOMETHING HERE
}
});
}
});
});
</script>