Javascript 如何将文件上载与尚未创建的表单提交关联？

我正在构建一个传统的服务器呈现的HTML应用程序（在PHP之上使用），它允许用户创建想法。他们访问CreateIdea表单，填写一些问题，然后单击submit。一旦他们这样做了，表单会向服务器发送一个

POST

请求，然后服务器会保存数据，为想法生成一个ID（和slug）

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

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

但是，如果浏览器在用户提交表单之前发送文件，我如何才能最好地将文件与表单数据关联？我还没有身份证

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

生成GUID作为表单的一部分。随任何文件上传一起提交。如果表单最终提交，请将其保存为表单数据的一部分（作为隐藏字段）

要求用户在启用文件上载之前提交表单（保存草稿）。显然，这不是一个很好的用户体验

作为上面2）的一个变体，在用户开始上传文件之前，通过Ajax自动提交表单

---

我倾向于解决方案1，但想看看我可能没有想到什么。2不太好，因为用户体验混乱，3也不太理想，例如，因为我可能最终保存了用户从未保存过自己（并放弃）的想法草稿，部分原因是生成的片段可能基于缺少或不完整的标题，因为用户在上传文件之前可能没有完成标题字段。

以下是我的建议：

• 立即上载文件（验证后…）
• 在数据库的“files”表中输入一个条目，第一个是路径/文件名（使其唯一！），第二个是唯一的，足够长的标记
• 将其发送回您的表单（作为上传返回），然后
• 将其与表单一起提交到隐藏输入中

---

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

FilePond的文档实际上有一个：

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

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

客户端使用POST请求将文件my-file.jpg作为多部分/表单数据上传

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

服务器在文本/普通响应中返回唯一的位置id 12345

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

客户端提交包含具有唯一id的隐藏输入字段的FilePond父窗体

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

---

我的建议是：立即上传文件（验证后…），在数据库的“文件”表中输入路径/文件名和唯一标记，将其发送回表单并与表单一起提交。（然后创建一个cronjob，删除所有未使用的文件）谢谢@Jeff，这听起来是个聪明的方法！如果您想将此添加为一个答案，您目前正处于梦寐以求的正确答案状态：）