jquery - html form.serialize 返回空字符串

Question

我有一个input上传图像的文件，我想将该图像发送到裁剪它的插件。

要将input文件转换为base64，我正在尝试向我们的 php 服务器发出 ajax 请求。如果我得到 via jquery 的value，input我会得到“C:/fakepath ...”，所以我试图form用这个提交一个input。

这在 ainput中使用的element（可重用组件）中使用form，因此我创建了一个form与 "parent" 无关的嵌套form。

我的问题是，当尝试form通过 jquery 的serialize方法获取数据时，我得到一个空的string. 我如何获取form数据？

<script>
    $(document).ready(function() {
        $("#picture").change(function(){
            let formData = $('#upload-picture-form').serialize(); //returns ""

            $.ajax({
                url: '/users/getBase64',
                type: 'post',
                dataType: 'json',
                data: formData,
                success: function(data) {
                    alert(data);
                },
                fail: function (data) {
                    alert(data);
                }
            });
        });
    });
</script>

<section>
    <?php echo $this->Form->input('User.avatar', [
        'label' => false,
        'type' => 'file',
        'class' => 'form-control picture',
        'value' => '',
        'after' => '<br><br><br>',
        'form' => 'upload-picture-form',
    ]); ?>
</section>

<?php 
    echo $this->Form->create('User', [
        'id' => 'upload-picture-form',
        'type' => 'get',
        'enctype' => 'multipart/form-data',
        'action' => 'getBase64'
    ]);
    echo $this->Form->end();
?>

html输出结构：

<form enctype="multipart/form-data" method="post" accept-charset="utf-8">
    ... (divs, fieldsets, sections)
    <script>...</script> (see above)
    <form action="/users/getBase64" id="upload-picture-form" enctype="multipart/form-data" method="get" accept-charset="utf-8"></form>
    </fieldset>
</form>

标签： jqueryhtmlajaxformscakephp