如何通过ajax提交带有数据和文件的表单?

How can I submit a form with data and files by ajax

本文关键字：文件 表单 数据 何通过 ajax 提交      更新时间：2023-09-26

你好，我试图通过ajax提交表单。当我在表格中没有文件时，它工作得很好。现在我已经添加了文件，我不知道如何添加这些信息。在添加文件之前，我的代码是这样的:

 var postData = form.serializeArray();
 $.ajax({
            url : 'my/url',
            type: "POST",
            data : postData,
            success:function(data, textStatus, jqXHR)
            {
                console.log('success');
            },
            error: function(jqXHR, textStatus, errorThrown)
            {
                console.log('Fail');
            }
        });

我一直在看教程，他们说使用formData对象来获取文件。像这样:

  if (files.length) {
         fileData = new FormData();
        $.each(files, function(key, value)
        {
            fileData.append(key, value);
        });
    }

那么我如何将其附加到postData变量并将它们一起提交呢?

编辑:我试过这样做:

fileData = new FormData($('#form').serializeArray());
fileData = new FormData($('#form'));

我得到错误:

illegal invocation

将表单传递给FormData的构造函数要比迭代并向数据添加文件容易得多。

$( '#formId' )
  .submit( function( e ) {
    $.ajax( {
      url : 'my/url',
      type: 'POST',
      data: new FormData( this ),
      processData: false,
      contentType: false,
      success:function(data, textStatus, jqXHR)
      {
          console.log('success');
      },
      error: function(jqXHR, textStatus, errorThrown)
      {
                console.log('Fail');
      }
    });
    e.preventDefault();
});
相关文章：