Добавьте изображение к публикации, используя Ajax и Laravel 5.4

Question

Я пытаюсь добавить изображение в пост с помощью Ajax / Laravel 5.4.

Это мой HTML:

 <form class="comments-form" action="/upload/comments/{{$post->id}}" method="post" data-id ="{{$post->id}}" enctype="multipart/form-data">
@csrf
<div class="user-picture">
  <img src = '/images/avatars/{!! Auth::check() ?  Auth::user()->avatar : 'null' !!}'>
</div>
<div class="comment-input">
  <textarea name="comment" rows="8" cols="80" placeholder="Write a Comment"></textarea>
  <input type="file" name="meme" value="">
</div>

<div class="comment-button">
  <button class = 'add-comment' type="button" name="add-comment">Post</button>
</div>

Вот Ajaxкод:

  $('.add-comment').click(function(){
    var comment_data = $('.comments-form').serialize();
    var post_id = $('.comments-form').data('id');
    var formData = new FormData('.comments-form');// i think here is problem 

    $.ajax({
      headers: {
          'X-CSRF-Token': $('meta[name="_token"]').attr('content')
        },

        method: 'POST',
        url: '/upload/comments/' + post_id,
        data: comment_data,formData,

        success: function(data)
        {
          console.log(data);
          $('.all-comments').append(data);
        },

        error: function(data)
        {
          console.log('error');
        }
    });

Это не работает - что я делаю не так?

Answer 1

Если вы хотите хранить данные с помощью ajax .. вам не нужно помещать свои действия в вашу form component

<form class="comments-form" data-id ="{{$post->id}}">
{{ csrf_field() }}
  <div class="user-picture">
    <img src = '/images/avatars/{!! Auth::check() ?  Auth::user()->avatar : 'null' !!}'>
  </div>
  <div class="comment-input">
    <textarea name="comment" rows="8" cols="80" placeholder="Write a Comment"></textarea>
    <input type="file" name="meme" value="">
  </div>

  <div class="comment-button">
    <button class = 'add-comment' type="button" name="add-comment">Post</button>
  </div>
</form>

Я думаю, если вы хотите отправить свою форму, лучше использовать jqueryотправить метод

 $('.add-comment').submit(function(){
var post_id = $('.comments-form').data('id');
var comment_data = new FormData($(".comments-form")[0]);

$.ajax({
  headers: {
      'X-CSRF-Token': $('meta[name="_token"]').attr('content')
    },

    method: 'POST',
    url: '/upload/comments/' + post_id,
    data: comment_data,
    dataType: 'json'

    success: function(data)
    {
      console.log(data);
      $('.all-comments').append(data);
    },

    error: function(data)
    {
      console.log('error');
    }
});

Answer 2

you can solve it as the following:
 var formData = new FormData($("#FormId")[0]);
    $.ajax({
        url: '/upload/comments/' + post_id,
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        dataType: 'application/json',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
        },
        success: function (data, textStatus, jqXHR) {
         console.log(data);
         $('.all-comments').append(data);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log('error');
        }
    }); 
    return false;

переменная formData содержит все данные формы, если вы хотите отправить идентификатор записи с отправленными данными, вы можете поместить скрытое поле внутри формы, называемое идентификатором записи, например

    <input type="hidden" name="post_id" value="{{$post->id}}">

, а затемпримените вышеуказанный код

Answer 3

Конструктор FormData принимает форму, а не строку (вы передаете селектор css)

var formData = new FormData($('.comments-form').get(0));

Если вы используете таким образом FormData, все поля в форме будут автоматически добавлены в объект FormData.

Если есть элементы вне полей формы, которые нужно отправить, используйте метод append

formData.append('comment_data', $('.comments-form').data('id'));

При передаче объекта FormData в jQuery ajax вы передаете его отдельно и добавляете набор processData и contentType setв ложь

$.ajax({
  headers: {
      'X-CSRF-Token': $('meta[name="_token"]').attr('content')
    },

    method: 'POST',
    url: '/upload/comments/' + post_id,
    data: formData,
    contentType: false,
    preocessData: false,
    success: function(data)
    {
      console.log(data);
      $('.all-comments').append(data);
    },

    error: function(data)
    {
      console.log('error');
    }
});