laravel - 如何在 Laravel 5 中使用 Dropzone 与现有表单并通过按下按钮提交所有内容

Question

我有:

{!! Form::open(['route'=>'admin.some.store', 'method' => 'post', 'id' => 'creation-form']) !!}
    {!! Form::text('name', null, ['class' => 'form-control', 'id'=>'name']) !!}
    {!! Form::text('name1', null, ['class' => 'form-control', 'id'=>'name1']) !!}
    {!! Form::button('Submit', ['class' => 'btn btn-primary', 'type'=>'submit']) !!}
{!! Form::close() !!}

我需要将 dropzone.js 与这样的表单一起使用。我需要立即将表单和图像的所有数据提交到同一个 Controller 。我该怎么做。我发现了其他问题和文档，但我遇到了一些问题(例如，当我不使用 dropzone 类时，预览显示为无样式。该类不仅是自动启动插件的 id，而且还是样式、编程激活的重要元素， ETC)。 Dropzone 的文档非常不合逻辑。

Answer 1

有几种方法可以解决这个问题。据推测，您当前的表单模型(我们称之为 Element )至少有一个 one to many与图像的关系，如果不是 many-to-many 。

我通常通过正常处理上传(因为它们被放入 Dropzone)并将返回的 ID 附加到我的主表单来解决此问题

照常创建 Laravel 表单:

{!! Form::open(['method' => 'POST', 'route' => ['some.route.name'], 'class' => 'myForm') !!}

// various fields...

{!! Form::close() !!}

创建您的 Dropzone 表单区域:

{!! Form::open(['route' => ['some.route.location'], 'class' => 'dropzone', 'files' => true]) !!}


{!! Form::close() !!}

然后为您的 Dropzone 实例添加 Javacript:

$(document).ready(function() {
    Dropzone.options.myUploadForm = {
        success: function(event, response) {
            $('.myForm').append("<input type='hidden' name='image_ids[]' value='"+response.photo_id+"' />");
        }
    };
});

然后，您的主表单将正常提交到您的 Controller 方法，此时您可以循环遍历 image_ids数组并将它们传递给它们自己的方法，该方法将它们与您的模型关联起来:

public function storeSomething(Request $request)
{

    $new_element = $this->element->create($request->all());

    // depending on the type of relationship, you can now use the
    // IDs to update your Photos
    $new_element->associateWithImages($request->input('image_ids'));
}

这种方法的缺点是用户可能会上传图像但无法完成表单，在这种情况下，您可能会得到一些“孤立”图像。但是，这可以通过定期删除孤立图像的 Cron 作业来处理。

否则，您可以尝试使用一些 Dropzone 配置选项一次性上传所有内容。您需要对放置在 Dropzone 中的图像进行排队，并在提交主表单后手动处理队列。看看here