javascript - 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>

查询：

$(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]);

除此之外，我还尝试直接在 AJAX 请求中使用var formdata = new FormData(this);和放置。new FormData(this);最后，我也尝试过使用params:而不是data:，遗憾的是无济于事。我的 PHP 脚本应该返回一个指向可以下载文件的链接，然后该链接应该显示在带有 class 的元素中upload-text。

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

标签： javascriptphpjqueryajax