如何在创建文章时使用JQuery-File-Upload上传多张图片？

Question

如何在创建文章时使用JQuery-File-Upload上传多张图片？

jqueryruby-on-railsruby-on-rails-3carrierwave

9

我发现使用jQuery-File-Upload，Carrierwave或Dragonfly无法在创建帖子时在一个页面上添加多个图像。我有两个模型，一个带有多个图像的帖子。我希望在添加后立即上传图片，并在保存整个新帖子之前有取消选项。我的代码不起作用，所以我没有在这里贴出它，也许有人有例子，这个概念是否可行于jQuery-File-Upload？如果不行，也许还有其他方法可以保存多张照片并保持bootstrap视图？我找到了一些很好的示例，与期望的功能类似，但使用Upladify：FormFly 或仅使用Carrierwave和nested_form：carrierwave-nested_form。在jQuery-File-Upload git wiki 上有一个教程，介绍如何在Rails中仅使用一个模型来使用它。我想要得到像这样的东西： enter image description here

- roza

1

我和你的一个非常相似的应用程序遇到了同样的问题。这里的问题可能会给你一些提示：https://dev59.com/9mox5IYBdhLWcg3wNRpj - John Powel

2个回答

3

我发现了一个使用JqueryFileUpload和carrierwave在rails中上传多张图片的小例子。

我目前正在研究更好的解决方案来实现JqueryFileUpload的多文件上传，但这个主题并不容易。在这个示例中生成一个包含body:string属性的post脚手架，在pictures_controller的new action中设置一个新的post对象实例，您可以在pictures/new视图中实现一个用于发布文章的表单。

<%= form_for(@post) do |f| %>
  <div class="field">
    <%= f.label :body %><br />
    <%= f.text_field :body %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

- bulleric

我看到了这个例子，但对我来说它与父级帖子模型不符。感谢新的概念。 - roza

2

嗨Roza，我fork了bootstap-uploader的repo来向你展示我的解决方案。请查看https://github.com/bulleric/bootstrap_uploader。您需要创建一个post才能在posts show view(posts/1)中上传图片，重要的是您需要一个有效的post id。如果您想同时上传多张图片，则必须先保存post。您不能保存未保存在数据库中的关系。在我的应用程序中，我创建了一个upload scaffold，只是为了保存图片。当上传完成后，我调用一个confirm方法来保存pictures中的post_id。 - bulleric

好的，我也是这么想的，虽然在 FormFly 中是异步完成的，可能使用 jQuery-File-Upload 在同一步骤中添加图片是不可能的，或者解决方案太困难了。我知道如何在下一步创建帖子后添加照片，在一页中这是整个僵局。我还没有关闭问题，但感谢您的贡献。 - roza

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Brad Werth · Accepted Answer

这其中的主要问题是一个问题：“如何与不存在的对象建立关联？”。嗯，你做不到。你能做的就是下一步最好的事情，就是通过巧妙地处理来解决。我将向您展示如何通过三个简单的步骤实现这一点。我有意不发布任何代码，因为过程本身应该非常清晰，并且适用于各种方法（不仅仅局限于jQuery-File-Upload和Carrierwave或Dragonfly）。

第1步

像往常一样独立设置每个关系的部分。使用一个脚手架（或其他东西）来生成新帖子。在帖子表单正下方，像往常一样实现您的照片上传解决方案。我会像往常一样使用每个对象自己的控制器和partials，以防止这些东西不可消除地混合在一起。现在不要担心关系协会代码。

第2步

将关系代码添加到模型中。不必担心界面尚未正确关联它们。

第3步（有趣的部分）

现在，将它们全部绑定在一起。我们已经创建了图像，但它们不属于任何帖子。我们还创建了没有任何图像的帖子。我们需要某种方式来完成这种关联。解决方案非常简单。您需要在帖子表单中创建一个隐藏的文本字段，以包含要与帖子关联的图像的ID。然后，在您的图像创建响应中，同时将新图像的ID添加到文本字段中，就像将新图像添加到页面中一样。同样，在帖子控制器中，只需循环遍历来自隐藏字段的ID，并在保存之前关联目标对象。您可能还想添加类似的逻辑到取消按钮，例如在从页面中删除图像时从数组中删除ID。您可能还想添加一个定期任务来清除一定年龄的图像，这些图像未与帖子相关联，以从废弃的表单中清除任何杂物。