Javascript FormData附加不起作用

我写这篇文章是为了使用HTML中的

input

元素将图像上传到本地Apache Web服务器。

文件

记录为非空，但为什么

表单数据

完全为空

$('#upload-image').change(function(e){
    var file = e.target.files[0];
    var imageType = /image.*/;
    if (!file.type.match(imageType))
        return;
    console.log(file);
    var form_data = new FormData();
    form_data.append('file', file);
    console.log(form_data);
    $.ajax({
        url: 'http://localhost/upload.php',
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,
        type: 'POST',
        success: function(response){
            console.log(response);
        },
        error: function(error){
            console.log(error);
        }
    });

});

这是我在本地Web服务器上的

upload.php

<?php
    header('Access-Control-Allow-Origin: *');
    if ( 0 < $_FILES['file']['error'] ) {
        echo 'Error: ' . $_FILES['file']['error'] . '<br>';
    }
    else {
        move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
        $target_path = $_SERVER['DOCUMENT_ROOT'] . "/uploads/" . $_FILES['file']['name'];
        echo $target_path;
    }
?>

---

console.log（response）

记录PHP文件的所有代码行，而不是使用

console.log（formData）

记录formData对象时返回的

echo
结果，因为不能记录formData

如果只需在发送前记录，可以使用
entries（）
获取formData对象中的条目

$('#upload-image').change(function(e) {
    var file = e.target.files[0];
    var imageType = /image.*/;

    if (!file.type.match(imageType)) return;

    var form_data = new FormData();
    form_data.append('file', file);

    for (var key of form_data.entries()) {
        console.log(key[0] + ', ' + key[1]);
    }

    $.ajax({
        url: 'http://localhost/upload.php',
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,
        type: 'POST',
        success: function(response) {
            console.log(response);
        },
        error: function(error) {
            console.log(error);
        }
    });

});

我注意到，
contentType:false
只适用于jquery1.7.0及以上版本。因此，请确保您使用的是正确的jQuery版本。
您是否尝试在url中仅使用“upload.php”？看到绝对路径并不常见，更不用说localhost了，记住AJAX调用取决于javascript文件所在的位置，因此，例如，如果在根目录中有一个名为“phpFiles/upload.php”的文件夹，那么应该将其放在url.console.log（form_data）中；你来这里的目的是什么？你希望看到什么？您不能真正记录formData对象，因此它应该是空的，即使文件在那里。您是否检查了服务器是否收到了文件。@adeneo它将存储在哪里？我找不到
上传的位置
folder@adeneo我认为它是
/var/www/html
，但我看不到
上传的
，它什么时候会存储在Web服务器上？我找不到
上传的位置
我想它是
/var/www/html
但我看不到
上传的位置
这正是我想要的..谢谢你！试图实现
HTMLFormElement
而不仅仅是常规表单，我一直在尝试
console.log（formData）
并编辑我的表单，然后重试（并重复），试图返回一些内容，直到看到这一点。谢谢@adeneo