FormData 附加不起作用

Posted 2023-02-22

【中文标题】FormData 附加不起作用

【英文标题】：FormData append not working

【发布时间】：2017-02-25 00:37:21

【问题描述】：

我写这篇文章是为了使用 html 中的 input 元素将图像上传到我的本地 Apache 网络服务器。 file 记录为非空，但为什么 form_data 完全为空？

$('#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);
        
    );

);

这是我在本地网络服务器上的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文件的所有代码行，而不是echo的返回结果

【问题讨论】：

你试过在 url 中使用 'upload.php' 吗？看到绝对路径并不常见，更不用说 localhost，请记住 AJAX 调用取决于 javascript 文件所在的位置，例如，如果您的根目录中有一个名为“phpFiles/upload.php”的文件夹，那么应该放在网址中。

console.log(form_data);你来这里的目的是什么？

您希望看到什么？你不能真正记录一个 formData 对象，所以它应该是空的，即使文件在那里。您是否检查了服务器是否收到了文件。

@adeneo 它将存储在哪里？我找不到uploads 文件夹的位置

@adeneo 我想是/var/www/html 但我看不到uploads 那里

【参考方案1】：

当仅使用 console.log(formData) 记录 formData 对象时，它总是返回空，因为您无法记录 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);
        
    );

);

【讨论】：

什么时候存储在网络服务器上？我找不到uploads的位置

我认为是/var/www/html，但我在那儿看不到uploads

正是我想要的......谢谢

太棒了！试图实现HTMLFormElement 而不仅仅是常规表单，我一直在尝试console.log(formData) 并编辑我的表单并再次尝试（并重复），试图返回一些东西，直到我看到这个。谢谢@adeneo

【参考方案2】：

我自己注意到contentType: false 仅适用于 jQuery 1.7.0 及更高版本。所以请确保您使用的是正确的 jQuery 版本。