Javascript 如何在对后端的ajax请求中包含字符串值和图像文件？

我正在尝试使用jQueryAjax发送一个图像和一些输入文本值

我试着只发送图像，但似乎一切都正常。。 但当我将输入包含在文本值中时，就会显示出来

Uncaught TypeError:未能对“FormData”执行“append”：参数2不是“Blob”类型。

            var file_data = $('#picture').prop('files')[0];   
            var form_data = new FormData();   
            form_data.append('image', file_data);
            form_data.append(
                    'firstname'   ,   about[0],
                    'middlename'  ,   about[1],
                    'lastname'    ,   about[2],
                    'email'       ,   about[3],
                    'number'      ,   about[4],
                    'username'    ,   account[0],
                    'password'    ,   account[1],
                    'rfid'        ,   account[2],
                    'type'        ,   account[3],
                    'status'      ,   account[4],
            ); 
            $.ajax({
                type: "post",
                url: baseurl+"/admin/test",
                data: form_data,
                cache: false,
                contentType: false,
                processData: false,
                dataType: "json",
                failure : function(jqXHR, textStatus, errorThrown) {
                    alert("error" + textStatus);
                },

---

请告诉我如何正确地执行此操作。

不使用这种代码，您只需这样做即可。。。 让我向您澄清一下，您有一个

，在这个表单中，您有您附加的所有输入，您还将有一个提交按钮，对吗？因此，为所有输入指定一个名称，并为提交按钮指定一个类，如下图所示，

submit

，您将在表单标签中显示

mulitpart/form data

，如上图所示，这是用于图像或文件的标签

下一件事是在jquery中使用它

$(document).on('click','.sendData',function(e){
  e.preventDefault();
  var form_data = new FormData(this.form);
  $.ajax({
            type: "post",
            url: baseurl+"/admin/test",
            data: form_data,
            cache: false,
            contentType: false,
            processData: false,
            dataType: "json",
            failure : function(jqXHR, textStatus, errorThrown) {
                alert("error" + textStatus);
            },
});

---

这会给你想要的一切。你不需要额外的代码，只要

dd（）php代码中的数据并查看所有数据。我希望它能对您有所帮助。
您应该使用
内容类型：multipart/form data
发送请求，并注意您只能在每个formData中附加一个键和值。append（）

PS：使用camelCase变量是JS的最佳实践：-）

您必须单独追加每个参数，而不是在一个单独的追加调用中。。有关formData.append的规范，请参见
const formData = new FormData()
const fileData = $('#picture').prop('files')[0]
formData.append('image', fileData)
formData.append('firstname', about[0])
/* add the rest of your data */
const config = {
  headers: {
    'Content-Type': 'multipart/form-data',
  },
}

$.ajax({
    type: 'POST',
    url: baseurl + "/admin/test",
    config
});