Question

我试图在ajax请求中传递一组文件，这是我的代码：

$(document).on('click', '#submit_edit_discussion', function (event) {
    event.preventDefault();
    var channel_id = $('#channel_id').val();
    var discussion_id = $('#discussion_id').val();
    var title = $('#title').val();
    var content = $('#content').val();
    var image_choice = [''];
    var image = [''];
    var new_image = [''];
    for (var i = 0; i < $('.images').data('images-count'); i++) {
        image_choice[i] = $('input[name="image_choice_' + i + '"]:checked').val();
        image[i] = $('#image_' + i).data('image-id');
    }
    for (var i = 0; i < $('#images_i').val(); i++) {
        var j = i + 1;
        new_image[i] = $('#new_image_' + j + '').prop('files')[0];
    }
    $.post('edit', {
        'content': content,
        '_token': $('input[name=_token]').val(),
        'channel_id': channel_id,
        'title': title,
        'discussion_id': discussion_id,
        'image': image,
        'image_choice': image_choice,
        'new_image': new_image
    }, function (data) {
        console.log(data);
    });
});

数组new_image包含我记录时的图像，它显示正确但是当我将它添加到帖子请求的对象数据时它不会工作

Answer 1

要上传文件，您需要发送包含二进制数据的FormData对象。您无法将文件序列化为字符串 - 这是您当前代码尝试执行的操作。

请注意，您可以使用接受form元素的submit构造函数来大规模简化该过程。您可以通过挂钩form的{{1}}事件而不是click按钮的submit来实现此目的。如果表单中的input元素中未包含所有值，则可以使用append()方法手动添加它们。

然后，数据将使用input元素的键填充在FormData对象中。注意，此方法中的数据不能以数组形式提供;每个单独的值必须拥有它自己的密钥。如果您希望将数据存储在单个密钥中，则可以对数据进行序列化/反序列化，但这需要分别在客户端和服务器上手动完成。

这是一个基本的工作示例：

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

  $.ajax({
    url: 'edit',
    type: 'post',
    data: new FormData(this),
    processData: false,
    contentType: false
  }, function(data) {
    console.log(data);
  });
});

jQuery AJAX文件上传

1 个答案: