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

时间:2014-12-08 18:23:07

标签: javascript php jquery ajax

我环顾四周,但我似乎无法找到解决方法。我是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中的图像数据一起传递。

2 个答案:

答案 0 :(得分:3)

知道了!最后我离开了:

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

答案 1 :(得分:1)

$.ajax({
                type: "POST",
                url: "insert_record.php",
                 //dataType:'json',
                data: new FormData(this),
                contentType: false,
                cache: false,
                processData: false,
                success: function(data) {
                    alert("OK");
                }
            });