如何将文件上传与尚未创建的表单提交相关联？答案

【问题标题】：How can I associate file uploads with a form submission that has not yet been created?如何将文件上传与尚未创建的表单提交相关联？
【发布时间】：2018-11-08 05:46:26
【问题描述】：

我正在构建一个传统的服务器呈现的 HTML 应用程序（在 PHP 之上使用 Statamic），它可以让用户产生想法。他们访问 Create Idea 表单，填写一些问题，然后单击提交。一旦他们这样做了，表单就会向服务器发送一个POST 请求，然后服务器会保存数据，为这个想法生成一个 ID（和 slug）。

我现在想让用户上传文件作为他们想法的一部分。当然，执行此操作的老式方法是将文件输入添加到表单中，然后一次性提交所有内容（数据和文件）。服务器可以创建一个 ID，然后将文件与 ID 相关联。

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

但是，如果浏览器在用户提交表单之前发送文件，我怎样才能最好地将文件与表单数据相关联？我还没有要使用的 ID。

这一定是一个已解决的问题。但我无法通过谷歌找到任何最佳实践，因此这个问题。我想到的可能解决方案：

生成一个 GUID 作为表单的一部分。与任何文件上传一起提交。如果最终提交表单，请将其保存（作为隐藏字段）作为表单数据的一部分。
要求用户在启用文件上传之前提交表单（保存草稿）。显然不是很好的用户体验。
作为上述 2) 的变体，在用户开始上传文件之前的某个时间点通过 Ajax 自动提交表单。

我倾向于解决方案 1，但想看看我可能没有想到的。 2 不是很好，因为 UX 令人困惑，而 3 似乎也不太理想，例如因为我最终可能会保存用户从未真正保存自己（并放弃）的草稿，部分原因是生成的 slug 可能是基于缺少或不完整的标题，因为用户在上传文件之前可能没有完成标题字段。

【问题讨论】：

我的建议：立即上传文件（验证后..），在数据库的“文件”表中输入路径/文件名和唯一令牌，将其发送回您的表单并提交它与表格。（然后创建一个删除所有未使用文件的 cronjob）
谢谢@Jeff，这听起来是个聪明的方法！如果您想将此添加为答案，那么您目前正在努力争取令人垂涎的正确答案状态:)

标签： javascript php forms file-upload statamic

【解决方案1】：

这是我的建议：

立即上传文件（验证后..）
在数据库的“文件”表中创建一个条目，第一个是路径/文件名（使其唯一！），第二个是唯一且足够长的令牌
将其发送回您的表单（作为上传返回）并
将其与隐藏输入中的表单一起提交。

然后创建一个 cronjob，每隔一小时左右删除一次所有未使用的文件。

【讨论】：

【解决方案2】：

FilePond 的文档，其实有一个description of a recommended setup：

使用 FilePond 异步上传文件称为处理。简而言之，FilePond 向服务器发送一个文件，并期望服务器返回一个唯一的文件 id。然后，此唯一 ID 用于恢复上传或稍后恢复较早的上传。

随着时间的推移描述的上传过程：

客户端使用 POST 请求将文件 my-file.jpg 作为 multipart/form-data 上传

服务器将文件保存到唯一位置 tmp/12345/my-file.jpg

服务器在文本/纯文本响应中返回唯一位置 ID 12345

客户端将唯一 ID 12345 存储在隐藏的输入字段中

客户端提交包含具有唯一 ID 的隐藏输入字段的 FilePond 父表单

服务器使用唯一 ID 将 tmp/12345/my-file.jpg 移动到其最终位置并删除 tmp/12345 文件夹

【讨论】：