如何获取表单数据和表单。在ajax jquery上序列化数据参数

Question

我有一个表单可以上传很多信息和一个文件多上传器，像这样：

<div class="col-md-4">
 <div class="form-group">
    <label class="control-label col-md-3">Location</label>
    <div class="col-md-9">
        <?php
        $location = array(
            "type" => "text",
            "name" => "location",
            "id" => "location",
            "class" => "form-control"
        );
        echo form_input($location);
        ?>
        <span class="help-block"></span>
    </div>
 </div>
</div>

<div class="col-md-12">
  <div class="form-group">
    <label class="control-label col-md-2">Warehouse</label>
    <div class="col-md-10">
        <?php
        foreach ($tipe as $v):
            echo "<label class='checkbox-inline'><input type='checkbox' name='tipe[]' value='$v->ID_CHECK_LIST'>$v->NAMA_CHECK_LIST</label>";
        endforeach;
        ?>
        <p class="help-block"></p>
    </div>
  </div>
</div>

<div class="col-md-12">
  <div class="form-group">
    <label class="control-label col-md-2">Image If Damage</label>
    <div class="col-md-4">
        <input type="file" multiple="" name="images[]">
        <p class="help-block"></p>
    </div>
  </div>

现在，我需要使用ajax发送它们。我试过$（表格）。序列化（），但$\u文件为空，因此我使用FormData类。但是FormData只处理文件，而不是另一个输入。如何设置aja参数中的数据以处理文件和其他输入。

这是ajax jquery

$('#form').submit(function () {            
        $('#btnSave').text('saving...'); //change button text
        $('#btnSave').attr('disabled', true); //set button disable

        var url;
        var formData = new FormData(this);

        if (save_method === 'add') {
            url = "<?php echo site_url('members/it/Request/ajax_add') ?>";
        } else {
            url = "<?php echo site_url('members/megumi/cek_list_wire_rod/ajax_update') ?>";
        }

        // ajax adding data to database

        $.ajax({
            url: url,
            type: "POST",
            data: formData,
                processData: false,
                contentType: false,
                $('#form').serialize(),
            dataType: "JSON",
            success: function (data)
            {

                if (data.status) //if success close modal and reload ajax table
                {
                    $('#modal_form').modal('hide');
                    reload_table();
                } else
                {
                    for (var i = 0; i < data.inputerror.length; i++)
                    {
                        $('[name="' + data.inputerror[i] + '"]').parent().parent().addClass('has-error'); //select parent twice to select div form-group class and add has-error class
                        $('[name="' + data.inputerror[i] + '"]').next().text(data.error_string[i]); //select span help-block class set text error string
                    }
                }
                $('#btnSave').text('Save'); //change button text
                $('#btnSave').attr('disabled', false); //set button enable
            },
            error: function (jqXHR, textStatus, errorThrown)
            {
                alert('Error adding / update data');
                $('#btnSave').text('save'); //change button text
                $('#btnSave').attr('disabled', false); //set button enable

            }
        });
        return false;
    });

任何帮助它如此赞赏。

Answer 1

对于需要发送的所有数据，请使用FormData，因为PHP支持multipart/FormData以及application/x-www-form-urlencoded。您可以将key:value对添加到FormData，它们将显示为普通$\u POST变量，但您添加的文件将位于$\u文件中。

示例：

var fd = new FormData();
fd.append('file1', file1);
fd.append('file2', file2, 'newFile2Name.pdf');
fd.append('username', 'password');
fd.append('file_id', file_id);

$.ajax({
    url: url,
    type: "POST",
    data: fd,
    processData: false,
    contentType: false,
    success: function(response) {},
    error: function(xhr, textStatus, errorThrown) {},
    complete: function() {}
});

请注意，没有dataType属性。您的$（'#form'）。序列化（）随机代码需要删除，因为它是无效的语法（您不能将表达式放在对象文字表达式中）。

在PHP中：

<?php

$_FILES['file1']['name'] === 'file1.pdf';
$_FILES['file2']['name'] === 'newFile2Name.pdf';

$_POST['username'] === "password"
$_POST['file_id'] === "4"

?>