如何将Laravel5中的Dropzone与现有表单一起使用，并通过按下按钮提交所有内容

我有：

---

我需要在这样的表单中使用dropzone.js。我需要将我的表单和图像的所有数据一次提交给同一个控制器。我该怎么做呢。我发现了其他问题和文档，但我面临一些问题（例如，当我不使用dropzone类时，预览显示为非样式。该类不仅是自动启动插件的id，也是样式设置、程序激活等的重要元素）。Dropzone的文档非常不吸引人。

有几种方法。假设您当前的表单模型（称之为

元素

）至少与图像有

一对多

关系，如果不是

多对多

我通常通过正常地处理上传（因为它们被丢弃在Dropzone中）并将返回的ID附加到我的主窗体来解决这个问题

像往常一样创建您的Laravel表单：

{!! 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表单区域：

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

// various fields...

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

然后为Dropzone intsance添加JavaScript：

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


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

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

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

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

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'));
}