从动态添加的表单中获取文件

时间:2015-11-25 13:53:44

标签: javascript php laravel laravel-5

在我的网站上,我有一个带图片的滑块。在后端,显示当前滑块图像以及添加输入字段的按钮,因此我可以为滑块上传新图像。

添加输入字段的代码是通过一些jQuery完成的。当我单击该按钮时,正在执行以下Javascript函数:

function addSliderImageEdit(){
    dataToAppend =
        "<li class='list-group-item'>" +
        "<div class='form-inline'>" +
        "<div class='input-group'>" +
            "<input type='file' id='slider-edit' class='slider-edit' name='slider-edit'/>"+
        "<span class='input-group-btn'>" +
        "<button class='btn btn-danger btn-remove-image-upload' type='button'>Verwijder afbeelding</button>" +
        "</span>" +
        "</div>" +
        "</div>" +
        "</li>";

    $('#btn-add-image-upload').on('click', function () {
        $(".list-group")
            .append(dataToAppend);
    });

    $('.list-group').on('click', '.btn-remove-image-upload', function () {
        $(this).parent().parent().parent().parent().remove();
    })
}

代码运行良好,并添加了带删除按钮的输入字段。

问题是我无法访问使用此动态添加的输入字段上传的图像。当我使用Input::file()Request::file('slider-edit')时,结果始终为null

我认为这是因为我没有使用Laravel Form Builder来创建这些动态输入字段。我试图更改Javascript代码,以便它使用Laravel表单生成器,但它不起作用。

那么,是否有人知道如何使用Laravel中动态添加的输入字段访问这些正在上传的文件?

提前致谢。

================== EDIT =================

我的表单以:

开头
{!! Form::model($project, ['method' => 'PATCH', 'action' => ['Backend\ProjectController@update', $project->id], 'files' => true]) !!}

显示当前滑块图像的代码:

<div class="row">
    <div class="form-group">
        <div class="col-lg-12">
            <p><strong>Huidige slider afbeeldingen</strong></p>

            <ul class="list-group sortable-images">

                {!! Form::text('order', '', ['id' => 'serialize_input']) !!}

                <div class="form-horizontal">
                    {!! Form::button('Voeg afbeelding toe', ['id' => 'btn-add-image-upload', 'class' => 'btn
                    btn-default']) !!}
                </div>

                @foreach($images as $image)

                <li class="list-group-item">
                    <p style="display:none">{{ $image->id . ';'}}</p>

                    <img src="/images/sliders/{{ $image->image }}" class="img-responsive">

                    <div class="input-group">
                        {!! Form::text('image[' . $image->id . ']', $image->image, ['class' => 'file-caption-name form
                        form-control file-caption kv-fileinput-caption']) !!}
                        <div class="input-group-btn">
                            <button type="button"
                                    class="btn btn-danger fileinput-remove fileinput-remove-button"
                                    data-toggle="modal" data-target="#myModal">
                                <i class="glyphicon glyphicon-trash"></i>
                                <span><span class="hidden-xs">Verwijder</span> {!! Form::checkbox('delete_image[' . $image->id . ']', $image->image) !!}</span>
                            </button>

                            <div tabindex="500" class="btn btn-success btn-file"><i
                                    class="glyphicon glyphicon-picture"></i> <span class="hidden-xs">Pick Image</span>
                                {!! Form::file('sliderimage[' . $image->id . ']')!!}
                            </div>
                        </div>
                    </div>
                </li>

                @endforeach

            </ul>
        </div>
    </div>
</div>

关闭表单:

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

我不知道这是否正是您所要求的,但这是放置动态生成代码的代码。

2 个答案:

答案 0 :(得分:0)

如果由于某种原因需要继续使用patch,那么文件将通过请求正文传递,在这种情况下,您将无法使用常用方法从Laravel中获取它们{{1 }}

您需要使用PATCH/PUT not accepting multipart/form-data file uploads?中描述的方法。

如果您将其更改为Input::file(),则应该可以正常工作,假设没有其他错误。

答案 1 :(得分:0)

我找到了答案,它实际上超出了我提供的代码,我没想到,所以我为此道歉。

问题在于这段代码:

<div class="col-lg-12 col-md-12 col-sm-12">
   {!! Form::model($project, ['method' => 'PATCH', 'action' => ['Backend\ProjectController@update', $project->id], 'files' => true]) !!}

我的Form::submit()Form::close()位于页面底部,但由于div之前已关闭,因此页面输入和文本框的其余部分无法发送请求。

所以代码看起来像这样:

<div class="col-lg-12 col-md-12 col-sm-12">
       {!! Form::model($project, ['method' => 'PATCH', 'action' => ['Backend\ProjectController@update', $project->id], 'files' => true]) !!}

       ...
       some input boxes
       ...
</div>

the input fields for the slider images

{!! Form::submit() !!}

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

现在,我的代码看起来像这样:

<div class="col-lg-12 col-md-12 col-sm-12">
       {!! Form::model($project, ['method' => 'PATCH', 'action' => ['Backend\ProjectController@update', $project->id], 'files' => true]) !!}

       ...
       some input boxes
       ...


       the input fields for the slider images

       {!! Form::submit() !!}

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

</div>

现在,当我使用dd()时,表单会正确显示上传的文件。

现在感觉很愚蠢,因为问题是一个简单的错位括号,我花了几天时间才找到错误。此外,我的代码有很多div和其他标签,所以错位的支架并没有突出。但再次感谢您寻找并尝试寻找解决方案!