如何将文件上传与尚未创建的表单提交相关联? [英] How can I associate file uploads with a form submission that has not yet been created?

查看:207
本文介绍了如何将文件上传与尚未创建的表单提交相关联?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在构建传统的服务器呈现的HTML应用程序(使用PHP之上的 Static ),该应用程序可以使用户创造想法.他们访问创建想法"表单,填写一些问题,然后单击提交".一旦这样做,表单就会向服务器发送一个POST请求,然后服务器将保存数据,并为该想法生成一个ID(和信息).

I'm building a traditional server-rendered HTML application (using Statamic on top of PHP) that lets users create ideas. They visit a Create Idea form, fill out some questions, and click submit. Once they do so, the form sends a POST request to the server, which then saves the data, generating an ID (and slug) for the idea.

我现在想让用户上传文件作为他们想法的一部分.当然,老式的方法只是将文件输入添加到表单,然后立即提交所有内容(数据和文件).服务器可以创建一个ID,然后将文件与该ID相关联.

I'd now like to let users upload files as part of their idea. The old-fashioned way to do this, of course, would just be to add file inputs to the form, and then have everything submitted at once (data and files). The server could create an ID and then associate the files with the ID.

但是,这种方法有一些缺点,尤其是在等待表单提交过程中必须等待文件上传的所有延迟中.较现代的实现似乎会在文件添加完成后立即上传(例如,通过拖放操作).例如,我已经确定 FilePond 作为领先者,否则我可能会使用 Dropzone.js .

However, this approach has some downsides, not least of all the delay of having to wait for the files to be uploaded as part of the form submission process. More modern implementations appear to upload files as soon as they have been added (e.g., via drag-and-drop). I've identified FilePond as a front-runner, for instance, or else I would probably use Dropzone.js.

但是,如果浏览器在用户提交表单之前发送了文件,我该如何最好地将文件与表单数据相关联?我还没有ID可使用.

However, if the browser sends the file(s) before the user has submitted the form, how can I best associate the files with the form data? I don't yet have an ID to use.

这必须是一个已解决的问题.但是我无法通过Google找到任何最佳做法,因此就出现了这个问题.我可能遇到的解决方案:

This must be a solved problem. But I couldn't find any best practice via Google, hence this question. Possible solutions that occur to me:

  1. 生成GUID作为表单的一部分.提交此文件并上传任何文件.如果最终提交表单,则将其保存为表单数据的一部分(作为隐藏字段).
  2. 要求用户在启用文件上传之前提交表单(保存草稿).显然不是很好的用户体验.
  3. 作为上述2)的变体,在用户开始上传文件之前的某个时候,自动通过Ajax提交表单.

我倾向于解决方案1,但想看看我可能在想什么. 2由于UX的混乱而不太好,3也似乎不太理想,例如,因为我可能最终会保存用户从未真正保存自己(并放弃)的草稿想法,部分原因是生成的弹头可能是基于标题丢失或标题不完整的原因,因为用户在上传文件之前可能尚未完成标题字段.

I'm leaning towards solution 1 but wanted to see what I might not be thinking of. 2 is not great because of the confusing UX, and 3 seems less than ideal too, for example because I might end up saving draft ideas that the user never actually saves themselves (and abandons), and partly because the slug that gets generated might be based off a missing or incomplete title, since the user might not have completed the title field before uploading files.

推荐答案

这是我的建议:

  • 立即上传文件(验证后.)
  • 在数据库的文件"表中输入第一个路径/文件名(使其唯一!)和第二个唯一的,足够长的令牌
  • 将其发送回您的表单(作为上传的回报),然后
  • 使用隐藏输入中的表单提交它.

然后创建一个cronjob,每小时删除一次所有未使用的文件.

Then create a cronjob that removes all unused files once an hour or so.

这篇关于如何将文件上传与尚未创建的表单提交相关联?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

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