如何在ajax jquery的data参数中获取FormData和form.serialize

Question

I have a form to upload a lot of information and a file multiupload uploader like this :

<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>

Now, I need to send them using ajax. I have try $(form).serialized(), but the $_FILES is empty, So I use FormData class. But FormData just handle the file, not the another input. How can I set the data in aja parameter to handle file and another input.

This is the 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;
    });

Any help it so appreciated.

Answer 1

Use FormData for all your data that you need to send, as PHP supports multipart/form-data as well as application/x-www-form-urlencoded . You can add key: value pairs to the FormData , and they will appear as normal $_POST variables, but the files you add will be in $_FILES .

Example:

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() {}
});

Note that there is no dataType property. Your $( '#form' ).serialize() random code needs to be deleted, as it is invalid syntax (you can't put expressions inside a object literal expression).

In PHP:

<?php

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

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

?>