Форма загрузки Laravel, возвращающая json

Question

Я все еще новичок в Laravel и застрял с этой формой загрузки AJAX: он по-прежнему отправляет ответ json, отображаемый в браузере, вместо того, чтобы оставаться на текущей странице, как я ожидал.Я просто хочу получить ответ json, который мог бы использовать на текущей странице.

Вот мой взгляд

<form action="/Project/UploadDocumentProject" enctype="multipart/form-data"  method="post"  id ="form0">

    {{ csrf_field() }}

    <input id="ProjectID" name="ProjectID" type="hidden" value="{{$Project->id}}">

    <div class="form-group">
        <input name="DocumentFile" id="DocumentFile" class="form-control" type="file" >
    </div>


    <div class="form-group">
        <button id ="test" class="btn btn-success upload-image" type="submit">Upload</button>
    </div>

</form>

Вот мой запрос ajax

$('#form0').on("submit", function(e){
    e.preventDefault();
    $(this).ajaxForm(options);

    var options = { 
        complete: function(response) 
        {
            if($.isEmptyObject(response.responseJSON.error)){
                $("input[name='DocumentFile']").val('');
                alert('Image Upload Successfully.');
            }else{
                printErrorMsg(response.responseJSON.error);
            }
        }
    };

});

Вот мой контроллер

public function UploadDocumentProject (Request $Request)
{
    $ProjectID=$Request->get('ProjectID');
    $filename = $Request->DocumentFile->getClientOriginalName();

    $Request->DocumentFile->storeAs('/public/projects/'.$ProjectID.'/files',$filename);

    return response()->json(['success'=>'done']);

}

Вот мой маршрут

Route::post('/Project/UploadDocumentProject','ProjectController@UploadDocumentProject');

Я уже пытался указать data-ajax = "true" data-ajax-method = "POST" в моей форме, но тогда запрос не учитывает ввод файла даже при указании поля данных в моемзапрос ajax.Кто-нибудь может мне помочь?

Спасибо!:)

Answer 1

Наконец-то нашёл, как сделать правильную форму файла ajax

Вот как я это сделал

Просмотр

<form action="{{ route('Project/UploadDocumentProject') }}"  method="post" id ="form0" enctype="multipart/form-data" >

        {{ csrf_field() }}
        <input id="ProjectID" name="ProjectID" type="hidden" value="{{$Project->id}}">



        <div class="form-group">
          <input name="fileAjax" id="fileAjax" class="form-control" type="file">test</textarea>  
        </div>

        <div class="form-group">
          <button id ="test" class="btn btn-success upload-image" type="submit" >Upload</button>
        </div>


</form>

Запрос Ajax

var files;


                 $('input[type=file]').on('change', prepareUpload);


                 function prepareUpload(event)
                 {
                    files = event.target.files;
                  }
                  $("#form0").submit(function (e) {
                    e.preventDefault();
                    var form = $("#form0");
                    var data = new FormData();

                    $.each(files, function(key, value)
                       {
                            data.append(key, value);
                        });

                    var $ProjectID = $('#ProjectID').val();

                     data.append('ProjectID', $ProjectID);
                    $.ajax({
                        type: "post",
                        url: form.attr('action'),
                        data: data,
                        processData: false,
                        contentType: false,
                        cache: false,
                        enctype: 'multipart/form-data',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },


                        success: function (data) {
                            //some code here...
                        }
                    });
                });

Контроллер

 public function UploadDocumentProject (Request $Request) {
$path = $Request->file('0')->store('document');
$filename = $Request->file('0')->getClientOriginalName();
$Request->file('0')->storeAs('/public/projects/files',$filename);

  //some code here...

return Response::json(array('var1'=>$val1 ,...));

}

Маршрут

Route::post('Project/UploadDocumentProject', ['as'=>'Project/UploadDocumentProject','uses'=>'ProjectController@UploadDocumentProject']);

Answer 2

Вам необходимо указать options, прежде чем использовать его .ajaxForm(options).И я бы настроил его непосредственно после загрузки, а не в submit-Handler

Переработанный код JS:

$.ready(function(){
    var options = { 
        complete: function(response)
        {
            if($.isEmptyObject(response.responseJSON.error)){
                $("input[name='DocumentFile']").val('');
                alert('Image Upload Successfully.');
            }else{
                printErrorMsg(response.responseJSON.error);
            }
        }
    };
    $(this).ajaxForm(options);
}};

Если протестировать его без целевого приложения php бэкэнда - Но запрос с файлом былпослал.Поэтому, если у вас возникнут дополнительные проблемы, просто дайте мне знать