Question

我在Rails中有一个应用程序，用户可以在其中发布新帖子。在表单中，我传递了:remote => true所以当记录插入到数据库中时，帖子会以javascript的形式添加到视图中。到目前为止，这一切都在发挥作用。

最近，我阅读了有关如何使用HTML5（this）进行拖放和自动上传的formData文章。

我以下列方式实现了这个：

拖放，工作
发送附件并将其交给Carrierwave，正常工作
使用附件创建新帖子，正常工作

仅在以前的位置，当帖子创建时，Rails会呈现create.js.erb并在新创建的帖子前面添加，这不再起作用。帖子是在数据库中创建的，如果我点击重新加载，帖子就会显示正常。但create.js.erb中的前置javascript操作未执行。

application.js

var doc = document.documentElement;

doc.ondrop = function(event) {
  event.preventDefault();

  var files    = event.dataTransfer.files,
      formData = new FormData(),
      xhr      = new XMLHttpRequest();

  formData.append('authenticity_token', $('meta[name="csrf-token"]').attr('content'));

  for (var i=0; i < files.length; i++) {
    formData.append('post[image]', files[i]);
  };

  xhr.open('POST', '/posts', true);
  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log('all done: ' + xhr.status);
    } else {
      console.log('Something went wrong...');
    }
  };

  xhr.setRequestHeader('accept', '*/*;q=0.5, text/javascript');
  xhr.send(formData);

}

posts_controller.rb

def create
  @post = Post.create!(params[:post])
end

create.js.erb

$('<%= j render @post %>').hide().prependTo('.posts').fadeIn();

终端显示请求被处理为JS：

Processing by PostsController#create as JS

我的部分和ujs文件也被呈现：

Rendered posts/_post.html.erb (6.4ms)

Rendered posts/create.js.erb (7.9ms)

修改

好吧，我想出了我的问题，这是我在这里没有涉及的事情。我还使用Pusher将帖子发布给所有倾听的客户。不知怎的，Pusher gem阻止了UJS在浏览器中呈现。

所以上面的代码与Rails 3一起工作。我希望我可以帮助那些想要尝试HTML5拖放上传的人。

UJS不在Rails 3中使用XMLHttpRequest上传

0 个答案: