Undefined index when trying to upload image ( with jquery validate and steps )

I’m using form steps with jquery steps and jquery validate. But when i try to upload image, it show “Undefined Index: picture”. When i try without both of jquery, it works.

register.php

<form class="form-contact contact_form" id="register" enctype="multipart/form-data">
    <input name="remarks" id="remarks" type="hidden" value="SMP">
    <div class="row">   
        <h3> Profil  </h3>
        <section>
            <div class="col-md-3">
                <p class="katapen">NISN</p>
            </div>
            <div class="col-md-9">
                <input class="form-control required number" name="nisn" id="nisn" type="text" placeholder='Please enter your NISN'>
            </div>  
            <div class="col-md-3">
                <p class="katapen">School Status</p>
            </div>
            <div class="col-md-4">
                <div class="switch-wrap d-flex justify-content-between">
                    <div class="primary-radio">
                        <input type="radio" name="schoolstatus" value="A" id="primary-radio" required>
                        <label for="primary-radio"></label>
                    </div>
                    <p class="spasidrradio">A</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="switch-wrap d-flex justify-content-between">
                    <div class="primary-radio">
                        <input type="radio" name="schoolstatus" value="B" id="primary-radio">
                        <label for="primary-radio"></label>
                    </div>
                    <p class="spasidrradio">B</p>       
                </div>
            </div>  
        </section>

        <h3> Personal Data </h3>
        <section>
            <div class="col-md-3">
                <p class="katapen">Full Name</p>
            </div>
            <div class="col-md-9">
                <input class="form-control required" name="fullname" id="fullname" type="text" placeholder='Please enter your fullname' required>

                <div class="col-md-3">
                    <p class="katapen">Picture</p>
                </div>
                <div class="col-md-9">
                    <input class="form-control" name="picture" id="picture" type="file">
                </div>
            </section>

test.js

var former = $("#register");

former.validate
({
    errorPlacement: function errorPlacement(error, element) 
    { 
        element.before(error); 
    },
    rules: 
    {

    }
});

former.children("div").steps
({
    headerTag: "h3",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    onStepChanging: function (event, currentIndex, newIndex)
    {
        former.validate().settings.ignore = ":disabled,:hidden";
        return former.valid();
    },
    onFinishing: function (event, currentIndex)
    {
        former.validate().settings.ignore = ":disabled";
        return former.valid();
    },
    onFinished: function (event, currentIndex)
    {
        studentregister();
    }
});

function studentregister()
{
    var remarks     = document.getElementById('remarks');

    $.ajax
    ({
        type: "POST",
        url : base_url + "register/" + remarks.value,
        data: $('#register').serialize(),
        dataType: 'json',
        success: function(data)
        {
            if(data.log.status == '1')
            {
                swal
                ({
                    title: "",
                    type: "success",
                    text: data.log.ket,
                    confirmButtonClass: "btn-success",
                    confirmButtonText: "Con"
                },function(){                   

                }); 
            }else{
                swal
                ({
                    title: "",
                    type: "error",
                    text: data.log.ket,             
                    confirmButtonClass: "btn-default",
                    confirmButtonText: "Back"
                },function(){

                }); 
            }

            $("#register")[0].reset();
        },
        error: function(ts) 
        {
            alert(ts.responseText);
        }
    });
    return false;
};      

base_url + “register/” + remarks.value will be route to saveregister and remarks.value as uri2

This is my adm.php

public function saveregister()
    {
        $uri1 = $this->uri->segment(1);
        $uri2 = $this->uri->segment(2);
        $uri3 = $this->uri->segment(3);
        $uri4 = $this->uri->segment(4);

        //var post from json
        $p = json_decode(file_get_contents('php://input'));

        $_log   = array();

        if($uri2 == "SD")
        {

        }else if($uri2 == "SMP"){
            $p      = $this->input->post();

            $folder = "./upload/register/";

            $allowed_type   = array("image/jpeg", "image/jpg", "image/png", "image/gif", 
            "audio/mpeg", "audio/mpg", "audio/mpeg3", "audio/mp3", "audio/x-wav", "audio/wave", "audio/wav","video/mp4", "application/octet-stream", "application/pdf", "application/doc");

            $file_name      = $_FILES['picture']['name'];
            $file_type      = $_FILES['picture']['type'];
            $file_tmp       = $_FILES['picture']['tmp_name'];
            $file_error     = $_FILES['picture']['error'];
            $file_size      = $_FILES['picture']['size'];

            $ekstensi = explode("/", $file_type);

            $time = date("Yhsms");

            $filename= $this->db->escape($p['nisn'])."_".$time .".".$ekstensi[1];           

            @move_uploaded_file($file_tmp, $folder .$filename);
        }else{

        }
    }

Answer

If you look at the jquery serialize() Documentation, it says the data from file select elements is not serialized. You could use FormData to send file input through ajax :

function studentregister()
{
    var remarks     = document.getElementById('remarks');
    var form = $("#register")[0]; // use the form ID
    var formData = new FormData(form);                  

    $.ajax
    ({
        type: "POST",
        url : base_url + "register/" + remarks.value,
        data: formData,
        dataType: 'json',
        contentType: false, // required
        processData: false, // required
        success: function(data)
        {
            if(data.log.status == '1')
            {
                swal
                ({
                    title: "",
                    type: "success",
                    text: data.log.ket,
                    confirmButtonClass: "btn-success",
                    confirmButtonText: "Con"
                },function(){                   

                }); 
            }else{
                swal
                ({
                    title: "",
                    type: "error",
                    text: data.log.ket,             
                    confirmButtonClass: "btn-default",
                    confirmButtonText: "Back"
                },function(){

                }); 
            }

            $("#register")[0].reset();
        },
        error: function(ts) 
        {
            alert(ts.responseText);
        }
    });
    return false;
};