Загрузка файла Laravel с использованием Ajax - PullRequest
Новая
       18

Загрузка файла Laravel с использованием Ajax

0 голосов
/ 05 марта 2019

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

tasks.blade.php 

<form method="post" id="addTask_form" name="addtask" enctype="multipart/form-data">
      .......................
            <div class="form-group">
                <label>File</label>
                 <input type="file" name="file" id="file">
            </div>
            .............


        </div>                 

      <div class="modal-footer">
       ................
      </div>
      </form>

TasksController.php 

 function postdata(Request $request)
{
    $validation = Validator::make($request->all(), [
        .......
        'file' => 'nullable|image|mimes:jpeg,png,jpg,gif|max:2048',    
        'status' => 'required',

        ]);

   .............
    if ($validation->fails())
    {
        foreach ($validation->messages()->getMessages() as $field_name => $messages)
        {
            ...........
        }
    }
    else
    {
        if($request->get('button_action') == 'insert')
        {


            if($request->hasFile('file') && $request->file('file')->isValid()){
                $file = $request->file('file');
                $file_name = str_random(30) . '.' . $file->getClientOriginalExtension();
                $file->move(base_path() . '/assets/img', $file_name);
            }
            $task = new Task($request->input());

            $task->save();


    }


    $output = array(
        'error'     =>  $error_array,
        'success'   =>  $success_output
    );
    echo json_encode($output);
}

Спасибовы

Ответы [ 2 ]

0 голосов
/ 05 марта 2019

Вы можете использовать метод FormData для загрузки файла, используя Ajax Запрос на POST

$(document).on('submit', '#yourFormId', function(e){
  e.preventDefault();

  var form_data = new FormData($('#yourFormId')[0]); // this method will send the file request and the post data 
  form_data.append("_token","{{csrf_token()}}") //for csrf token
  $.ajax({
      type:'POST',
      url:'{{route('yourRoute')}}',
      async: false,
      cache: false,
      data : form_data,
      success: function(response){

      }
  });
});

В основном async:false выполнит запрос ajax и прекратит выполнение дальнейшего кода jsдо завершения запроса времени, поскольку загрузка файла на сервер может занять некоторое время.

В то время как cache заставит браузер не кэшировать загруженные данные для получения обновленных данных в запросе ajax

Referrer on Как загрузить файл с помощью Ajax On Post

0 голосов
/ 05 марта 2019

Вы не можете загрузить изображение с помощью serialize ().вам нужно использовать FormData
с contentType: false, processData: false,

=================================================================================== 

      var data = new FormData($('#addTask_form')[0]);
         $.ajax({
             url: "{{route('postdataroute')}}",
             data: data,
             type: 'POST',
             contentType: false,
             processData: false,
             success: function (data) {

             }      
         }); 


1. if you don't want to send csrf token

then 

app/Http/Middleware/VerifyCsrfToken.php

and add this route's url to the except array

protected $except = [
   'your route url'
];

2. if want 

then add in head 
<meta name="csrf-token" content="{{ csrf_token() }}">

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
in script
...