在Web应用程序中实现功能齐全的媒体上传 [英] Implementation of fully functional media uploading in web application

查看:101
本文介绍了在Web应用程序中实现功能齐全的媒体上传的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

假设我们有处理创建,读取,更新和删除文章的Web应用程序,并且每个文章都应具有图像库.我必须在Article和Gallery之间建立一对一的关系,在Gallery和Media之间建立一对多的关系.

Suppose we have the web application which handle create, read, update and delete articles and each article should have gallery of images. I have to make one to one relation between Article and Gallery and one to many relation between Gallery and Media.

HTML5提供了许多功能,例如多重上传,因此我想使用这种出色的 http://blueimp.github.io/jQuery-File-Upload/插件.问题是如何像处理其他表单的数据一样处理在内存中"的文件上传?

HTML5 gives a lot of features like multiupload, so I want to use this excellent http://blueimp.github.io/jQuery-File-Upload/ plugin for that. The problem is how to handle the file upload "in memory" like other form's data?

例如,当我们显示用于创建新文章的页面时,我们应该能够填写文章的数据字段并选择要上传的图像,接下来,当我们单击保存"按钮时,图像应该开始上传,然后应提交表单.当验证失败时,图像仍应显示在前端,但在服务器端则不保存提示.

For example when we show the page for create new article we should be able to fill in article's data fields and select images to upload, next when we click the save button the images should start upload and after that the form should submit. When validation fails the images should be still displayed on the frontend, but on the server-side nothink should be saved.

解决方案之一是在显示整个表单之前创建诸如创建实体会话临时ID"之类的想法,并且该ID可用于创建用于保存上载的临时目录,因此成功保存表单后,可以将这些图像移动到适当的目录中,但是如何使创建实体会话临时ID"?

One of the solutions is create somethink like "create entity session temporary id" before displaying the entire form and that id can be used to create temporary directory for save uploads, so after success saved form these images can be moved to appropriate directory, but how to make the "create entity session temporary id"?

我认为另一种解决方案是使用编辑ID"方法,因为我们可以使用以前保存的图库ID处理上载,但有时我不能使用图库保存新的空白文章,因为某些字段应该是在db中为空.

The other solution I think is the "with the edit id" approach, because we can handle the uploads with previously saved gallery id, but sometimes I can't save new blank article with gallery, cause some of the fields should't be empty in db.

对于Rails,我看到了 https://github.com/thoughtbot/paperclip 宝石,自述文件:

For the Rails I saw https://github.com/thoughtbot/paperclip gem which in the Readme says:

Paperclip旨在用作Active Record的简单文件附件库.其目的是使设置尽可能简单,并尽可能将文件与其他属性一样对待.这意味着在调用ActiveRecord :: Base#save之前,它们不会保存到磁盘上的最终位置,也不会被删除(如果设置为nil则不会删除).

Paperclip is intended as an easy file attachment library for Active Record. The intent behind it was to keep setup as easy as possible and to treat files as much like other attributes as possible. This means they aren't saved to their final locations on disk, nor are they deleted if set to nil, until ActiveRecord::Base#save is called.

我的问题是它如何工作?

My question is how it works?

推荐答案

在创建掩码上启用文件上载的问题在于,最终您将得到孤立的文件.这是因为用户可以在不保存实际实体的情况下触发上载.在创建自己的UploadBundle时,我考虑了一段时间,并得出结论,没有真正合适的解决方案.

The problem with enabling file uploads on the create mask is that you eventually end up with orphaned files. This is because a user is able to trigger the upload without saving the actual entity. While creating a very own UploadBundle I thought about this problem for a while and came to the conclusion that there is no truly proper solution.

我最终像这样实现它:

鉴于我们的问题来自孤立的文件,我创建了一个Orphanage来管理这些文件.上传的文件将首先与session_id一起存储在单独的目录中.这有助于区分不同用户之间的文件.提交表单以创建实际实体后,您可以仅使用您的会话ID从孤儿院检索文件.如果表单有效,则可以将文件从临时孤儿院目录移动到文件的最终目的地.

Given the fact that our problem arise from orphaned files, I created an Orphanage which is in charge of managing these files. Uploaded files will first be stored in a separate directory, along with the session_id. This helps distinguishing files across different users. After submitting the form to create the actual entity, you can retrieve the files from the orphanage by using only your session id. If the form was valid you can move the files from the temporary orphanage directory to the final destination of your files.

此方法有一些陷阱:

  • 应定期使用cron作业等清理孤儿目录本身.
  • 如果用户将上传文件并选择不提交表单,而是选择重新提交新表单,则新上传的文件将被移至同一目录中.因此,您将在上载文件后第一次和第二次都上载文件.

这不是解决此问题的最终方法,而是更多的解决方法.在我看来,它比使用临时实体或基于会话的存储系统更干净.

This is not the ultimate solution to this problem but more of a workaround. It is in my opinion however cleaner than using temporary entities or session based storage systems.

上述捆绑包可在Github上使用,并且同时支持 Orphanage jQuery File Uploader 插件.

The mentioned bundle is available on Github and supports both Orphanage and the jQuery File Uploader plugin.

1up-lab/OneupUploaderBundle

这篇关于在Web应用程序中实现功能齐全的媒体上传的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆