我想通过拖放功能实现多张图像上传，但在网上找不到任何可以帮助解决我具体情况的内容。
问题是我想在上传时将图像大小调整为 16：9 的比例，并在上传时显示缩略图。此外，我正在使用一个标签，我编写了一些 css 将其样式设置为一个不错的上传按钮，并使用该标签触发隐藏文件上传输入。
<label for="image">Upload image</label>
<input type="file" name="images[]" id="image">
我想我需要在每个"上传图像"按钮单击时使用 jquery ajax 将图像发送到上传脚本，在其中我调整图像大小，将（它们）上传到服务器并将图像路径返回给 jquery 作为响应，以便我可以显示调整大小的图像的缩略图。拖放功能也是如此，我侦听"下降"并将丢弃的图像发送到上传脚本。
到目前为止，我可以毫无问题地开始工作，但问题是我不想实际将图像上传到服务器，直到用户在完成所有输入后单击按钮提交表单。所以我的问题是我是否可以以这种方式操作图像，而不是上传到服务器，将它们存储在本地的某个地方，直到单击最终提交按钮？
我想到了一个解决方案，我使用 ajax 将图像上传到服务器上的"临时"文件夹，然后在表单提交时将它们移动到"图像"文件夹，然后设置 cron 每天清空该文件夹一次，但我想避免这种情况，因为用户可以开始填写表单， 上传一些图像，然后在他单击表单提交 cron 步骤并删除"临时"文件夹中的所有图像之前，他的图像将丢失。
每次选择文件时（在文件输入更改时），我最终都会通过 jquery 创建一个新的文件输入，从所有以前的文件输入中删除 id 并为我创建的新输入设置 id="image"，以便在单击附加到它的标签时它仍然有效。
为了显示预览缩略图，我使用 FileReader 并将上传的图像设置为缩略图div 的背景，我将其设置为响应式 16：9 比例（底部填充：56.25%）。提交表单后，将在服务器上进行实际的图像裁剪。