1

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

最近我读到这篇关于如何使用 HTML5 ( 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 拖放上传的人。

4

0 回答 0