jquery - 使用 Rails、Backbone、Remotipart 上传 AJAX 图像

Question

我已经成功使用 Remotipart 通过 AJAX 上传图像一段时间了，但我们最近决定走 Backbone 路线，现在由于我的表单是通过 JS 模板呈现的，我不再能够使用： remote => true 语法来生成 Iframe 传输代码。我不想弄清楚如何手动执行此操作。关于在使用 JS 模板时如何让 Remotipart 工作的任何想法？

Answer 1

想出了一个解决办法。我对 Remotipart 的 JS 如何工作感到有些困惑。经过一番研究，这是我发现的：

Remotipart 只需绑定到 ajax:aborted:file 事件即可工作，该事件在 jQuery UJS（处理传统 AJAX 表单提交）检测到表单中的文件时触发。由于该脚本（以及依赖的 iFrame 传输插件）已包含在页面中，您需要做的就是手动添加

data-remote="true"

到你的表格。jQuery 有一个 .on() 事件绑定到具有此类属性的表单，因此如果包含该事件，将触发 Remotipart。

但是，另一个问题是，如果提交此表单，由于缺少 CSRF 令牌，它仍然可能无法上传文件。解决方案是手动添加带有令牌的隐藏输入标签。

这是对我有用的最终标记（我正在使用带有一点 jQuery 的 .eco 模板来获取页面上 CSRF 元标记的值）：

<form accept-charset="UTF-8" id="image-upload-form" action="/projects/<%= @project.get('id') %>" method="post" enctype="multipart/form-data" data-remote="true">
    <input name="project[cover_photo]" type="file" />
    <input type="hidden" name="<%= $('meta[name="csrf-param"]').attr('content') %>" value="<%= $('meta[name="csrf-token"]').attr('content') %>" />
    <input name="_method" type="hidden" value="put" />
    <button id="add-photo">Save</button>
</form>

希望这能帮助其他人免去我遇到的同样的麻烦！