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

Question

我正在尝试从Stack用户DannYo的注释中合并一些代码，但是他的代码版本似乎无法运行。 每次都会返回错误和“ 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"; ?> <?php echo "success"; ?>

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

Answer 1

如果您的错误函数被调用，那么答案很可能在其结果之内。 请检查返回了什么错误，因为显示error function works吗？

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

编辑 ：另外要注意，我相信您需要处理您要上传的文件。 他的用php上传文件的教程可能会有用。