AJAX-FormData为空

Question

我正在尝试使用JQuery，AJAX和PHP脚本将文件上传到服务器，以处理服务器端上传。我已经测试了我的PHP脚本，该脚本现在可以正常使用了。但是，我的JQuery面临一些困难。经过一些测试后，我发现FormData很可能为空或没有发送到服务器。

我的代码如下：

HTML：

<form id="upload" enctype='multipart/form-data'>
    <input type="file" name="file" id="file" />
    <a href="#" id="upload-button" class="upload">
    <span class="upload-text">Upload</span>
    </a>
</form>

jQuery：

$(document).ready(function(){
    $("#upload-button").click(function(e) {
        document.getElementById("file").click();
        e.preventDefault();
    });

    $("#file").change(function(e) {
        e.preventDefault();
        $('.upload-text').html("Uploading...");
        $('#upload').submit();
    });

    $('#upload').submit(function(e) {
        e.preventDefault();
        //var fileData = $('#file').prop('files')[0];   
        //var formData = new FormData();                  
        //formData.append('file', fileData);

        var formData = $('#upload').serialize();

        $.ajax({
            url: 'ajaxupload.php',
            type: 'post',
            data: formData,
            contentType:false,
            processData:false,
            enctype: 'multipart/form-data',
            async: false,
            success: function(data){
                $('.upload-text').html(data);
            }
        });
    });
});

我尝试使用以下内容，但这也不起作用：

var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);

此外，我还尝试使用var formdata = new FormData(this);并将new FormData(this);直接放在AJAX请求中。最后，我也尝试使用params:代替data:，可惜没有用。我的PHP脚本应返回一个指向可下载文件的链接，然后将其显示在类为upload-text的元素中。

我正在使用JQuery 3.3.1（最新）。