Send FormData and Upload File Together Through JQuery AJAX Using Codeigniter?
<p>I am uploading file through Ajax using codiegniter but i also want to send from data and get it on controller and perform on it.</p>

<p>file uploading is working but can't get other form data.</p>

<p>I also serialize form data but didn't work.</p>

<p>Html Code :</p>

<pre><code>&lt;form action="&lt;?php echo site_url("admin_panel/upload_project_image") ?&gt;" id="form-upload"&gt;

&lt;input type="hidden" name="project_id" id="project_id" value="&lt;?=$project_details-&gt;ID;?&gt;"&gt;
              &lt;div class="fileinput fileinput-new input-group" data-provides="fileinput"&gt;
                &lt;div class="form-control" data-trigger="fileinput" style="margin:3px"&gt; &lt;i class="glyphicon glyphicon-file fileinput-exists"&gt;&lt;/i&gt;
                  &lt;span class="fileinput-filename"&gt;&lt;/span&gt;
                &lt;/div&gt;
                &lt;span class="input-group-addon btn btn-default btn-file" style="margin:3px"&gt;
                  &lt;span class="fileinput-new"&gt; &lt;i class="glyphicon glyphicon-paperclip"&gt;&lt;/i&gt;
                    Select file
                  &lt;/span&gt;
                  &lt;span class="fileinput-exists"&gt;
                    &lt;i class="glyphicon glyphicon-repeat"&gt;&lt;/i&gt;
                    Change
                  &lt;/span&gt;
                  &lt;input type="file" name="file[]" multiple id="file"&gt;&lt;/span&gt;
                &lt;a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput" style="margin:3px"&gt;
                  &lt;i class="glyphicon glyphicon-remove"&gt;&lt;/i&gt;
                  Remove
                &lt;/a&gt;
                &lt;a href="#" id="upload-btn" class="input-group-addon btn btn-success fileinput-exists" style="margin:3px"&gt;
                  &lt;i class="glyphicon glyphicon-open"&gt;&lt;/i&gt;
                  Upload
                &lt;/a&gt;
              &lt;/div&gt;
            &lt;/form&gt;
</code></pre>

<p>Jquery Code :</p>

<pre><code>$('#upload-btn').on('click', function(event) {
        var filesToUpload = inputFile[0].files;
        var projectID = $('#project_id').val();
        if (filesToUpload.length &gt; 0) {
            var formData = new FormData();

            for (var i = 0; i &lt; filesToUpload.length; i++) {
                var file = filesToUpload[i];

                formData.append("file[]", file, file.name);             
            }
            var other_data = $('#form-upload').serializeArray();
            $.each(other_data,function(key,input){
                formData.append(input.name,input.value);
            }); 
            $.ajax({
                url: uploadURI,
                type: 'post',
                data: formData,
                processData: false,
                contentType: false,
                success: function(data) {
                    console.log(data);
                    listFilesOnServer();
                },
</code></pre>

<p>Controller Code:</p>

<pre><code>function upload_project_image() {
        if (!empty($_FILES)) {
            $this-&gt;load-&gt;library('upload');
            $config['upload_path'] = "./assets/uploads";
            $config['allowed_types'] = 'gif|jpg|png|mp4|ogv|zip';
            $this-&gt;upload-&gt;initialize($config);
            $this-&gt;load-&gt;library('upload', $config);
            if (!is_dir($config['upload_path'])) {
                mkdir($config['upload_path'], 0777, true);
            }

            $files = $_FILES;
            $project_id = $_POST['projectID'];
            echo $project_id . "--ID";
            $number_of_files = count($_FILES['file']['name']);
            $errors = 0;
</code></pre>