如何在单个 Ajax 调用中发送表单字符串数据和图像数据

Posted 2023-05-08

【中文标题】如何在单个 Ajax 调用中发送表单字符串数据和图像数据

【英文标题】：How to send form string data and image data in a single Ajax call

【发布时间】：2016-08-22 03:19:31

【问题描述】：

如何合并两个 Ajax 调用，以便它们使用 formData API 传递表单输入数据和表单图像数据？

查看 Ajax 调用：

$("#submitbmsymptom").click(function(h)
    h.preventDefault();
    var radioValue;
    $('#radio1, #radio2, #radio3, #radio4').each(function()
        if($(this).is(':checked'))
            radioValue = $(this).val();
        
    );

    console.log(radioValue +
    $("#bmdate").val() +
    $("#bmtime").val() +
    $("#bmscale").val() +
    $("#bmpainlevel").val() +
    $("#bmobs").val()
    );

    $.ajax(
        url:'urllocation',
        method: 'POST',
            data:
                bmdate_data : $("#bmdate").val(),
                bmtime_data : $("#bmtime").val(),   
                bmscale_data : $("#bmscale").val(),
                bmcontents_data : radioValue,
                bmpainlevel_data : $("#bmpainlevel").val(),
                bmobs_data : $("#bmobs").val(),
            ,
        
        ).done(function(regresult)

    );
)

$("#submitbmsymptom").click(function(h)
    h.preventDefault();

    var pooPicture = $('input[name=poopic]');
    var fileUpload = pooPicture[0].files[0];

    var formData = new FormData();
    formData.append("file", fileUpload);

    $.ajax(
        url:'urllocation',
        method: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function() 
            alert("File uploaded");
        
    );
)

Controller 接收数据，将文件保存到服务器，然后使用关联数组将字符串数据和文件名插入数据库的方法：

function bowelmovements()
    $bmuserid = $this->session->userdata('id');
    $bmsymptomdate = $this->input->post('bmdate_data');
    $bmsymptomtime = $this->input->post('bmtime_data');
    $bmsymptomtype = $this->input->post('bmscale_data');
    $bmsymptomlocation = $this->input->post('bmcontents_data');
    $bmsymptompainlevel = $this->input->post('bmpainlevel_data');
    $bmsymptomobs = $this->input->post('bmobs_data');

    $config['upload_path'] = APPPATH.'/assets/uploads/';
    $config['allowed_types'] = "gif|jpg|png|mp4";

    $this->load->library('upload', $config);
    if($this->upload->do_upload("file"))
        $imageData = $this->upload->data();
        $fileName = $imageData[file_name];
        $bmdata = array(
            'userid' => $bmuserid,
            'bmdate' => $bmsymptomdate ,
            'bmtime' => $bmsymptomtime,
            'bmscale' => $bmsymptomtype,
            'bmcontents' => $bmsymptomlocation ,
            'bmpainlevel' => $bmsymptompainlevel,
            'bmobs' => $bmsymptomobs,
            'bmimage' => $fileName
        );

    $insertBM = $this->poomonitormodel->insertBM($bmdata);
    
    else
        echo "File not uploaded";
    

目前这仅提交第二个 Ajax 调用，并且仅将文件名插入到数据库中，但是我需要将两组数据都提交到表中。

谢谢。

【参考方案1】：

在这里，我将您的 2 个 ajax 调用压缩为一个：

$("#submitbmsymptom").click(function(h)
    h.preventDefault();
    var radioValue;
    $('#radio1, #radio2, #radio3, #radio4').each(function()
        if($(this).is(':checked'))
            radioValue = $(this).val();
        
    );

    var pooPicture = $('input[name=poopic]');
    var fileUpload = pooPicture[0].files[0];

    var formData = new FormData();
    formData.append("file", fileUpload);
    formData.append("bmdate_data", $("#bmdate").val());
    formData.append("bmtime_data", $("#bmtime").val());
    formData.append("bmscale_data", $("#bmscale").val());
    formData.append("bmcontents_data", radioValue);
    formData.append("bmpainlevel_data", $("#bmpainlevel").val());
    formData.append("bmobs_data", $("#bmobs").val());

    $.ajax(
        url:'urllocation',
        method: 'POST',
        processData: false,
        contentType: false,
        data: formData,
    ).done(function(regresult)

    );
);

【讨论】：

我已经修复了调用错误，这与没有提供将 contentType/processData 声明为 false 相关，但它没有在控制器中提取图像。我认为它需要不同的访问方式。

@gideveloper - 我在测试时遇到的唯一未定义类型错误是：TypeError: pooPicture[0] is undefined，这和你得到的一样吗？

不，从来没有这样的错误。正如我在上面发布的那样，我使用contentType:False, dataType: False 更正了第一个问题但是我没有在我的控制器中接收任何数据来执行其余的功能，例如保存文件。

我将其添加到上述答案中。试一试

我是个甜甜圈，我想从一开始就尝试一下！非常感谢您的帮助！