选择后立即上传图像的表单答案

【问题标题】：Form that uploads images immediately when selected选择后立即上传图像的表单
【发布时间】：2015-09-08 17:05:06
【问题描述】：

我有一个表单，它有一些普通的文本输入，但也允许上传图片。

我需要一个系统，当用户选择他们想要上传的图像时，它会立即上传它们（无需按下表单的提交按钮）。然而，表单的其余部分（普通文本输入）需要手动单击提交按钮。我相信这也是 Facebook 的做法（以防你不明白我在说什么）。

我不是在问如何编程，而是在问我应该如何组织它，因为我需要以某种方式在提交的表单数据和上传的图像之间建立联系。 p>

我正在考虑执行以下操作：

使用随机整数创建隐藏输入。
图片上传后，会上传到/uploads/<USER_ID>/<RAND_NUM>/等目录。
然后，当提交表单的其余部分时，它会检查该目录是否存在（意味着已上传图像），然后在那里进行关联。

我注意到 Laravel 会自动向表单添加一个 CSRF 随机令牌，但是，这个令牌不会在每次新刷新时都发生变化，所以我猜我必须创建另一个令牌专门满足我的需要。

这是解决此问题的建议方法还是有更好的方法？

【问题讨论】：

我想说的很对。只需散列文件名+时间戳并在上传文件时使用它来重命名文件。将该数据传回表单并将其放入隐藏的输入中。

标签： php forms laravel laravel-4

【解决方案1】：

您可以使用Dropezone 实现此目的。以下是我在代码中用于上传图片的代码：

$(".template-picture").dropzone({
    url: "{{ UPLOAD_URL}}",
    maxFiles: 1,
    paramName: 'file',
    success: function (file, response) {
        // store response in hidden field
    },
    sending: function(file, xhr, formData) {
        formData.append("_token", $('[name="_token"]').val());
    }
});

在服务器端。您可以在该位置接收文件并存储，并返回您要存储在数据库中的文件的路径，并将其设置在上述代码中成功函数的隐藏字段中。

【讨论】：

我已经在使用 dropzone.js，但同样，我不是在问如何做到这一点，而是在问如何组织它。
这就是我要建议的，您需要一个隐藏字段来存储文件的路径。并且上传操作返回存储在隐藏字段中的路径，然后将与其余的表单值一起提交。
如果您需要的随机数也可以在服务器端生成并伪装成正在返回的文件路径，或者您可以在发送函数中传递该随机数。