如何继续在 Laravel 5.1 中使用旧输入重新填充 Dropzone Div

Question

我正在制作一个带有输入的 Post 表单以及一个用于上传照片的 dropzone Div，

我的问题如下：由于我将所有照片推送到会话直到我与帖子保持关系的那一刻，当某些字段未填写时，我不知道如何继续。 我需要返回并再次提交表格。

问题是我的所有 dropzone 照片都从表单中清空，但没有从会话中清空。因此，如果我再次正确填写表格并提交数据，我将保留更多照片。

所以我正在考虑制作一个关于某些请求失败（未填写所有输入）的事件，然后刷新会话照片字段。

但我不知道这个请求失败的事实是如何表示的，或者我应该用 eg.Input:old 重新填充 dropzone Div。

谁能给我发个电话或者提个建议。

Answer 1

在我看来，刷新会话不是一个好主意。当表单验证失败时，上传图像的用户将不得不再次执行此操作。最好重新填充它们。

解决方案

您可以在表单中的 dropzone 输入下方添加图片，它们将作为上传的图片填充。您只需要一个 HTML 结构。

为了获得 HTML 结构，您可以上传一张图片（拖放到您的 dropzone 中），使用开发人员工具检查上传的图片并复制生成的代码。

您唯一需要做的就是将所有照片添加到服务器端的数组中。

我的 HTML 代码：

<div id="photos" class="dropzone">
    <input name="file" type="file">

    @foreach ($uploadedPhotos as $uploadedPhoto)
        <div class="dz-preview dz-processing dz-image-preview dz-success">
            <div class="dz-details">
                <img data-dz-thumbnail=""
                  src="{{ $uploadedPhoto['src'] }}"
                  class="@if ($uploadedPhoto['vertical']) vertical @endif">
            </div>
            <div class="dz-progress">
                <span class="dz-upload" data-dz-uploadprogress="" style="width: 100%;"></span>
             </div>
             <div class="dz-success-mark"><span>?</span></div>

             <a class="dz-remove" href="javascript:undefined;" data-dz-remove="">Remove image</a>
         </div>
    @endforeach
</div>

您可能需要使用一些 css 或 js 来设置样式并使其具有功能性，例如删除按钮。