Question

我的表单有一些普通的文本输入，但也可以上传图片。

我需要一个系统，当用户选择他们想要上传的图像时，它会立即上传它们（无需按下表单的提交按钮）。但是，表单的其余部分（普通文本输入）需要手动单击提交按钮。我相信Facebook也是这样做的（如果你没有得到我所说的话）。

我没有问如何编程，我问我应该如何组织这个，因为我需要以某种方式在提交的表单数据和上传的图像之间建立连接。

我正在考虑做以下事情：

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

我注意到Laravel会自动在表单中添加一个CSRF随机令牌，但是，这个令牌在每次刷新时都会不更改，所以我猜测我已经有了根据我的需要创建另一个令牌。

这是针对此问题的建议方法还是有更好的方法来实现？

Answer 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());
    }
});

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

选择时立即上传图像的表单

1 个答案: