php - jQuery AJAX を使用して FormData 経由でファイルをアップロードする

Question

jQuery だけを使用して 1 つのファイルをアップロードし、アップロード フォームを、ファイルのアップロードを処理した PHP スクリプトからの出力に置き換えます。

現在、送信をクリックすると、PHP スクリプトから空白の応答が返されます。フォームデータ（ファイルとアップロードの入力）がアップロードデータによって上書きされているためだと思いますか？

これを解決する助けがあれば大歓迎です!

これが私のコードです：

HTML

<div id="container">
    <form id="form" enctype="multipart/form-data">
        <input name="file" type="file">
        <input type="hidden" name="upload">
    </form>
    <a href="javascript:void(0)" onclick="uploadData($('#form').serialize(), 'upload.php', '#container'); return false;">Upload &gt;</a>
</div>

JavaScript

function uploadData(data, url, container) {

    var formData = new FormData($(data)[0]);

    $.ajax({
        type: 'POST',
        url: url,
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        success: function(response) {
            $(container).html(response);
        },
        error: function() {
            alert('Error!');
        },
    });

    return false;
};

PHP

if (isset($_POST['upload'])) {

    // check the file has been uploaded
    if (isset($_FILES['file'])) {

        // check if there was an error uploading the file
        if ($_FILES['file']['error'] > 0) {

            // display error
            echo 'Error: ' . $_FILES['file']['error'];
        } else {

            // move and store file (overwrite if it already exists)
            $fileName = '/upload/' . $_FILES['file']['name'];
            move_uploaded_file($_FILES['file']['tmp_name'], $fileName);

            echo 'File uploaded successfully';
        }
    } else {

        die ('Error: No file selected for upload');
    }

}