javascript - 如何通过 AJAX 调用传递带有图像的额外变量

Question

我环顾四周，但似乎找不到解决方案。我是 AJAX/PHP 方面的新手，所以如果这是一个简单的问题，请原谅我。

我有这个 AJAX，它应该抓取以表单上传的图像并将其传递给处理程序以在服务器上复制。

我的索引系统是在客户端验证的，因此我需要能够传递 Id 变量来重命名文件。这是 AJAX 代码:

    var input = document.getElementById("imgBrw");
    file = input.files[0];
    if (file !== undefined) {
        formData = new FormData();
        if (!!file.type.match(/image.*/)) {
            formData.append("image", file);
            console.log(formData);
            $.ajax({
                url: "file_handler.php",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function () {
                    console.log('img copied');
                }
            });
        } else {
            alert('Not a valid image!');
        }
    } else {
        console.log('No image change');
    }

这是我的 PHP:

$name = $_POST["articleA"];
$dir = "img/content/$name";
move_uploaded_file($_FILES["image"]["tmp_name"], $dir);

如您所见，AJAX 中没有 ArticleA 变量，但是当我尝试将其添加到数据时，它根本不写入图像，如下所示:

 data:{formData:formData, articleA: articleA}

我的问题是如何将articleA变量与formData中的图像数据一起传递。

Answer 1

明白了!最后我离开了:

formData.append("image", file);  

并添加另一个:

formData.append("nameA", articleA);  

在 PHP 端，只需通过 POST 获取它:

$name = $_POST['nameA'];
$dir = "img/content/$name";
move_uploaded_file($_FILES["image"]["tmp_name"], $dir);