创建帖子期间如何使用JQuery-File-Upload在一页上上传多个图像? [英] How to use JQuery-File-Upload to upload multiple images on one page during creating post?

问题描述

我意识到，当创建添加多个图像的帖子时，没有使用jQuery-File-Upload和Carrierwave或Dragonfly的解决方案来在一页上显示功能.我有两个模型，一个带有很多图像的帖子.我想在添加图片后立即上传图片，并且可以选择在保存整个新帖子之前取消图片.我的代码无法正常工作，所以我没有在此处粘贴它，也许有人举了例子，这个概念对于jQuery-File-Upload是否完全可行?如果没有，也许还有其他方法可以保存多张照片并保留引导视图吗?我找到了不错的示例，这些示例表示与预期的功能类似的功能，但带有Upladify: FormFly 或仅与Carrierwave和nested_form: carrierwave-nested_form .在jQuery-File-Upload上，git wiki 是指导如何仅在Rails中的一种模型上使用它.

I realized that there isn't a solution using jQuery-File-Upload and Carrierwave or Dragonfly to make ability on one page when create post to adding multiple images. I've two models one Post with many Images. I'd like to upload image immediately after added and have option to cancel it before save whole new Post. My code is not working so I didn't paste it here, maybe someone has example, whether this concept is at all feasible with jQuery-File-Upload? If no maybe is other way to save multiple photos and keep bootstrap view? I found nice examples which would represent a similar to the expected functionality but with Upladify: FormFly or only with Carrierwave and nested_form: carrierwave-nested_form. On jQuery-File-Upload git wiki is tutorial how to use it only with one model in Rails.

我想得到这样的东西:

I would like to get something like this:

推荐答案

所有这些的主要问题是问题如何与不存在的对象建立关联?" .好吧，你不能.您能做的是超越其次的最好的事情.我将通过3个简单的步骤向您展示如何做到这一点.我故意不发布任何代码，因为该过程本身应该非常清楚，并且适用于多种方法(不仅限于jQuery-File-Upload和Carrierwave或Dragonfly).

The chief problem with all of this is the question "How can one create an association with an object that does not exist?". Well, you can't. What you can do is the next best thing, outsmart it. I will show you just how to do that, in 3 easy steps. I am intentionally not posting any code, as the process itself should be fairly clear, and applicable to a variety of approaches (not just limited to jQuery-File-Upload and Carrierwave or Dragonfly).

第1步

独立地正常设置关系的每个部分.使用脚手架(或其他任何方式)来生成新帖子.在帖子表格的正下方，照常实施您的照片上传解决方案.我会像往常一样使用每个对象自己的控制器和部分控件，以防止这些东西不可磨灭地混合在一起.不必担心关系关联代码.

Setup each portion of the relationship as normal, independently. Use a scaffold (or whatever) to generate a new post. Right below the form for the post, implement your photo upload solution as normal. I would use each object's own controllers and partials, as normal, to prevent this stuff from indelibly mixing together. Do not worry about the relationship association code just yet.

第2步

将您的关系代码添加到模型中.不必担心接口尚未正确关联它们.

Add your relationship code to your models. Do not worry that the interface does not properly associate them, yet.

第3步 (有趣的部分)

现在，将它们绑在一起.我们正在创建图片，但它们不属于任何帖子.我们也创建了没有任何图像的帖子.我们需要一些方法来完成此关联.解决方案非常简单.您需要在帖子表单中创建一个隐藏的文本字段，以包含要与该帖子关联的图像的ID.然后，在图像创建响应中，在将新图像添加到页面的同时，将新图像的ID添加到文本字段.同样，在后控制器中，只需在隐藏字段中循环ID，然后在保存之前关联目标对象即可.您可能想要向取消按钮添加类似的逻辑，例如从页面删除图像时从数组中删除ID.您可能还想添加一个计划任务，以清理超过一定年龄的与帖子无关的图像，以消除废弃表格中的混乱情况.

Now, to tie it all together. We have images being created, but they don't belong to any posts. We also have posts being created without any of their images. We need some way to complete this association. The solution is fairly simple. You need to create a hidden text field in the posts form to contain the IDs of the images that are to be associated to the post. Then, your image creation response, add the ID of the new image to the text field at the same time you add the new image to the page. Similarly, in the post controller, simply loop over the IDs from the hidden field and associate the target object(s) prior to saving. You will probably want to add similar logic to the cancel button, like removing the ID from the array when the image is removed from the page. You may also want to add a scheduled task to clean up image past a certain age that are not associated with a post, to remove any clutter from abandoned forms.

这篇关于创建帖子期间如何使用JQuery-File-Upload在一页上上传多个图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！