如何在laravel 5.6中Ajax存储multipart / form-data?

时间:2018-11-13 15:51:05

标签: php ajax html5 laravel laravel-5.6

我正尝试通过ajax提交多部分/表单数据表单,我检查了许多与此问题相关的帖子,但没有任何修复方法对我有用,所以可能我只是缺少了一些东西,希望能对您有所帮助伙计们!

这是我的html表单,我在索引视图的div中将其渲染,并且我的版面标题中已经有csrf字段:

<form method="POST" id="createtc" action="{{ route('Tiemposcompensatorios.store') }}" enctype="multipart/form-data" class="form-inline border border-light p-4">
        <input id="empleado_id" name="empleado_id" type="hidden" value="">
        <div class="form-row">
            {!! csrf_field() !!}
            <div class="col">
                <input type="text" class="form-control" name="descripcion" value="{{ old('descripcion') }}" placeholder="Descripcion">
                <small class="form-text text-muted mb-4">
                    Ingresar solo texto
                </small>
                {!! $errors->first('descripcion','<span class=error>:message</span>')!!}
            </div>
            <div class="col">
                <input type="number" class="form-control" name="horas" id="horas" value="{{ old('horas') }}" placeholder="Horas">
                <small class="form-text text-muted mb-4">
                    Ingresar solo numeros
                </small>
                {!! $errors->first('horas','<span class=error>:message</span>')!!}
            </div>
            <div class="col">
                <input id="desde" name="desde" class="form-control datec" type="text" value="{{ old('desde') }}" placeholder="Desde" />
                <small class="form-text text-muted mb-4">
                    Formato AÑO-MES-DIA
                </small>
                {!! $errors->first('desde','<span class=error>:message</span>')!!}
            </div>
            <div class="col">
                <input id="hasta" name="hasta" class="form-control datec" type="text" value="{{ old('hasta') }}" placeholder="Hasta" />
                <small class="form-text text-muted mb-4">
                    Formato AÑO-MES-DIA
                </small>
                {!! $errors->first('hasta','<span class=error>:message</span>')!!}
            </div>
            <div class="col">
                <label for="autorizacion">Horas Autorizadas:</label>
                <input type="file" class="form-control-file" id="autorizacion" name="autorizacion">
            </div>
            <div class="col-auto">
                <button class="btn btn-info my-4 btn-block" type="submit">Guardar</button>
            </div>
        </div>
    </form>

这是我的js代码:

    $('body').on('submit', '#createtc', function(e) {
        e.preventDefault();
        var formData = new FormData($(this)[0]);
        setStore(formData);
    });
function setStore(data) {
    $.ajax({
        type: 'POST',
        url : "/Tiemposcompensatorios/store",
        data: data,
        contentType: false,
        processData: false,
    }).done(function (data) {
        $('.forms').html(data);  
    }).fail(function () {
        alert('Empleado could not be stored.');
    });
}

这是我的控制器代码:

public function store(CreateTiemposcompensatorioRequest $request)
{
    $request->autorizacion->store('tiempos');
    Tiemposcompensatorio::create($request->all());
    $tiemposcompensatorios = Tiemposcompensatorio::where('empleado_id','=',$request->empleado_id)->paginate(5);
    if ($request->ajax()) {
        return view('tiemposcompensatorios.list', compact('tiemposcompensatorios'))->render();
    }
}

在浏览器控制台中出现“ POST”的方法不允许错误,接下来是控制台中错误的图像:

POST error

1 个答案:

答案 0 :(得分:0)

我刚刚解决了这个问题,因为我正在使用资源控制器,所以存储操作的网址只是“ Tiemposcompensatorios”,而不是“ Tiemposcompensatorios / store”。

function setStore(data) {
$.ajax({
    type: 'POST',
    url : "Tiemposcompensatorios",
    data: data,
    contentType: false,
    processData: false,
}).done(function (data) {
    $('.forms').html(data);  
}).fail(function () {
    alert('Empleado could not be stored.');
});

}

感谢您的帮助!