jquery serializeArray没有得到html textarea和checkbox值

Question

helo，我想从html表单传递数据到服务器。服务器，我使用codeigniter。我使用ajax方法。

html表格：

    <div id="fileupload">
        <form id="upload-media-form" class="upload-media-form" method="POST" action="<?php echo base_url('register_task/upload_media') ?>" enctype="multipart/form-data">

          <div class="form-group col-md-12">
          <?php

            /***
             * Get a profile pic url and create checkbox option
             *
             * @author Dwi Purnomo <dwipurnomo.yk@gmail.com>
             *
             ***/
            $igSessionLength = count($instagram);
            for ($i = 0; $i < $igSessionLength; $i++) {

                echo "<input type=\"checkbox\" class=\"flat ig_dipilih zinput\" name=\"ig_id[]\" value=\"".$instagram[$i]['id']."\"><img class=\"avatar upload\" src=\"".$instagram[$i]['prof_pic']."\">";

            }
            ?>
            </div>

            <div class="form-group col-md-12">
              <label class="control-label col-md-3 col-sm-3 text-right" for="ig_caption">Caption</label>
              <div class="col-md-6 col-sm-6">
                <textarea id="ig_caption" required class="form-control col-md-7 zinput" name="ig_caption" placeholder="#caption, misal 'ayo piknik #petualangan'"></textarea>


              </div>
            </div>

          <div class="form-group col-md-12">
            <label class="control-label col-md-3 col-sm-3 text-right" for="ig_media">File Foto</label>
            <div class="col-md-6 col-sm-6">
                <span class="btn btn-success fileinput-button">
                    <i class="glyphicon glyphicon-plus"></i>
                    <span>Pilih foto...</span>
                    <input type="file" name="ig_media[]" id="imageInput" class="zinput" accept="image/*" multiple>
                </span>
            </div>
          </div>
            <input type="hidden" name="cron" class="cron-time zinput" value="">
            <input type="radio" name="tipe" class="flat zinput" value="sekali" checked>Sekali jalan<br >
            <input type="radio" name="tipe" class="flat zinput" value="jadwal">Terjadwal

        </form>
    </div>
    <br />
    <div class="cron-upload"></div>

  <!-- Message -->
    <img src="<?php echo base_url('assets/images/loading.gif') ?>" id="loading-img" style="display:none;" alt="Please Wait"/>
    <button type="submit" id="submit-btn" class="btn btn-primary btn-ok"><i class="glyphicon glyphicon-upload"></i>Upload Semua</button>

    <div id="progress" class="col-md-12 progress"><div id="progress-bar progress-bar-success"></div></div>
    <div id="output" class="col-md-12"></div>
  </div>

Javascript ajax：

    // Upload
    $(function () {
    'use strict';
    function handleFileSelect(evt) {
    var files = evt.target.files;
    for (var i = 0, f; f = files[i]; i++) {
        if (!f.type.match('image.*')) {
            continue;
        }

        var reader = new FileReader();
        reader.onload = (function (theFile) {
            return function (e) {
                console.log(e);
                var span = document.createElement('span');
                span.innerHTML =
                [
                    '<img style="width: 128px" src="',
                    e.target.result,
                    '" title="', escape(theFile.name),
                    '"/>'
                ].join('');

                document.getElementById('output').insertBefore(span, null);
            };
        })(f);

        reader.readAsDataURL(f);
    }
}

if ($('#fileupload').length) {
    var url = $('.upload-media-form').attr('action');
    var idDipilih = $("input[name='ig_id[]']:checked").map(function(i, e) {
      return $(this).val();
    }).get();

    var toSerialize = '';
    for (var i = 0; i < idDipilih.length; i++) {
      toSerialize += 'ig_id[]=' + idDipilih[i] + '&';
    }

    var caption = $('#ig_caption').serialize();
    $('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        formData: $('.zinput').serializeArray(),
        acceptFileTypes: /(\.|\/)(jpe?g|png)$/i,
        maxFileSize: 20999000,
        previewMaxWidth: 128,
        previewCrop: true,
        add: function (e, data) {
            $('#submit-btn').on('click', function () {
                data.submit();
            });
        },
        done: function (e, data) {
            console.log('done');
            console.log(e);
            console.log(data);
            $('#submit-btn').off('click');
            $.each(data.result.files, function (index, file) {
                console.log(file);
                $('<div class="box">').appendTo('#output');
                $('.box').last().html('<a href="'+file.url+'"><img width="128px" src="'+file.url+'"/></a>');
            });
        },
        progressall: function (e, data) {
            console.log('progressall');
            console.log(e);
            console.log(data);
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css(
                'width',
                progress + '%'
            );
        }
    }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');

    $('#imageInput').change(handleFileSelect);
}});

从codeigniter输入后回复我只得到：

    array(3) {
     ["ig_caption"]=>
     string(0) ""
     ["cron"]=>
     string(9) "0 0 * * *"
     ["tipe"]=>
     string(6) "sekali"
    }

我想得到ig_id []（多个复选框数据）和ig_caption（textarea）的值。拜托，帮帮我

Answer 1

请参阅此文档，提到不支持输入类型文件

https://api.jquery.com/serializeArray/