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

FormData构造函数采用的形式不是字符串（通过css选择器）

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

如果以这种方式使用FormData，表单中的所有字段都将自动添加到FormData对象中。

如果需要发送表单字段之外的项目，请使用附加方法

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

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

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

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

然后应用上面的代码

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

3 个答案: