使用 Ajax 和 Laravel 5.4 将图像添加到帖子答案

【问题标题】：Add image to post using Ajax and Laravel 5.4使用 Ajax 和 Laravel 5.4 将图像添加到帖子
【发布时间】：2018-05-29 17:17:14
【问题描述】：

我正在尝试使用 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');
        }
    });

这不起作用——我做错了什么？

【问题讨论】：

标签： php ajax laravel

【解决方案1】：

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 设置为 false

$.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');
    }
});

【讨论】：

【解决方案2】：

如果您想使用 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');
    }
});

【讨论】：

如果您尝试上传图像文件，序列化将不起作用

【解决方案3】：

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 变量包含表单的所有数据，如果您想发送带有发送数据的 post id，您可以将隐藏字段放在名为 post id 的表单中像这样

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

然后应用上面的代码

【讨论】：