使用jQuery AJAX通过FormData上传文件

Use jQuery AJAX to upload a file via FormData

本文关键字：文件 FormData 通过 jQuery AJAX 使用      更新时间：2023-09-26

我想只使用jQuery上传一个文件，然后用处理文件上传的PHP脚本的输出替换上传表单。

当前，在我点击提交之后，我从PHP脚本收到一个空白响应。我认为这是因为表单数据(文件和上传输入)被上传数据覆盖?

任何帮助解决这个问题是非常感谢!

下面是我的代码:

<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');
    }
}

我不认为ajax可以处理文件上传。你检查过文件是否真的上传了吗?

如果为真，则响应为空，因为isset($_POST['upload'])返回false。尝试添加最后一个else语句，以检查我所说的内容:

if (isset($_POST['upload'])) {
    ...
} else {
    die ('Error: AJAX cannot handle file uploads');
}
相关文章：