使用 jQuery/Ajax 上传 HTML 文件不起作用

Question

我正在尝试合并来自 Stack 用户 DannYo 的 comment here 的一些代码，但是我的他的代码版本似乎无法运行。错误和“beforesend”函数每次都返回。

HTML

<form action="" method="post" enctype="multipart/form-data">
    <input type="file" id="file">
    <input type="email" id="sender" name="sender" required>
    <input type="email" id="receiver" name="receiver" required>
    <input type="text" id="message" name="message">
    <button id="send" class="button">Send it</button>
</form>

JavaScript

$("form").on("submit", function() {

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

    $.ajax({
        url: 'upload.php',  //server script to process data
        type: 'POST',
        xhr: function() {  // custom xhr

            myXhr = $.ajaxSettings.xhr();

            if (myXhr.upload) { // check if upload property exists
                myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload
            }

            return myXhr;

        },

        //Ajax events
        beforeSend: function() { console.log("before send function works"); },
        success: function(e) {
            console.log(e);
        },
        error: function() { console.log("error function works"); },

        // Form data
        data: formData,

        //Options to tell JQuery not to process data or worry about content-type
        cache: false,
        contentType: false,
        processData: false
    });

    return false;

});

PHP

出于测试目的，upload.php 文件只有<?php echo "success"; ?>

使用 Chrome 的网络开发人员工具，我没有看到我的文件被传输到任何地方。有人在我的代码中看到一个明显的漏洞吗？谢谢

Answer 1

如果您的错误函数被调用，那么答案很可能在其结果中。请检查显示 error function works 时返回的错误是什么。

error: function(xhr, status, error) {
    alert(xhr.responseText);
    // OR
    alert(status + " : " + error);
}

编辑：还要注意，我相信您需要处理您尝试上传的文件的保存。 This tutorial for uploading files in php 可能有用。