使用javascript ajax post方法的未定义偏移PHP错误

Question

我已经使用javascript创建并上传了功能，我正在使用javascript发送输入文件数据，但对于$ _FILES，它无法正常工作，或者可能是我使用的方式不正确，请对此进行帮助

邮递区号

$valid_exts = array('jpeg', 'jpg', 'png', 'gif');
    $max_file_size = 200 * 1024; #200kb
    $nw = $nh = 600; # image with # height

    if ($_SERVER['REQUEST_METHOD'] === 'POST') {
        if (isset($_FILES['image']) || isset($_POST['filename'])) {
            if (!$_FILES['image']['error']) {
                if(!isset($_FILES['image'])) {
                    $ext = strtolower(pathinfo($_POST['filename'], PATHINFO_EXTENSION));
                } else {
                    $ext = strtolower(pathinfo($_FILES['image']['name'], PATHINFO_EXTENSION));
                }

                if (in_array($ext, $valid_exts)) {
                    $style      = $_POST['style'];
                    $file_name  = uniqid() . '.' . $ext;
                    $path       = './uploads/' . uniqid() . '.' . $ext;
                    $size       = getimagesize($_FILES['image']['tmp_name']);

                    $x = (int) $_POST['x'];
                    $y = (int) $_POST['y'];
                    $w = (int) $_POST['w'] ? $_POST['w'] : $size[0];
                    $h = (int) $_POST['h'] ? $_POST['h'] : $size[1];

                    $data   = file_get_contents($_FILES['image']['tmp_name']);
                    $vImg   = imagecreatefromstring($data);
                    $dstImg = imagecreatetruecolor($nw, $nh);
                    imagecopyresampled($dstImg, $vImg, 0, 0, $x, $y, $nw, $nh, $w, $h);
                    imagejpeg($dstImg, $path);
                    imagedestroy($dstImg);

                    $query  = "UPDATE users SET profile_pic='$file_name', style='$style' WHERE uid = '".$_SESSION['uid']."'";
                    $insert = mysqli_query($connect, $query);

                    if($insert) {
                        $_SESSION["message"] = "Profile picture updated successfully";
                        header('Location: profile.php?uid='.$_SESSION['uid']);
                    } else {
                        $_SESSION["message"] = "There were some errors";
                        header('Location: profile.php?uid='.$_SESSION['uid'].'&edit=1');
                    }

            } else {
                echo 'unknown problem!';
            } 
        } else {
            echo 'file is too small or large';

        }
    } else {
        echo 'file not set';
    }   
        } else {
            echo 'bad request!';
        }

这是我的JavaScript代码

function upload() {
var data = new XMLHttpRequest();
var url  = "includes/upload.php";

var file = document.getElementById("filename").value;
var image = document.getElementById("uploadImage").files[0];

var span = document.querySelector('#uploadPreview[style]'),
a = window.getComputedStyle(span, null).transform,
b = window.getComputedStyle(span, null).transformOrigin;
val = 'transform:'+a+';transform-origin:'+b+';backface-visibility: hidden;';

var vars = new FormData();
vars.append("style", val);
vars.append("image", image);
vars.append("filename", file);

data.open("POST", url, true);
data.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
data.onreadystatechange = function () {
    if(data.readyState == 4 && data.status == 200) {
        var return_data = data.responseText;
        document.getElementById("ms").innerHTML = return_data;
    }
}

data.send(vars);
}

这是HTML表格

<form method="POST" enctype="multipart/form-data" style="text-align:center;">
            <input id="uploadImage" type="file" name="uploadImage" style="margin:auto;" />
            <input type="hidden" id="filename" name="filename" value="<?php if(!empty($data['profile_pic'])) { echo $data['profile_pic'];} ?>" />
            <button type="button" name="update_picture" class="btn_form" onclick="upload();">Update Picture</button>
        </form> 

这是我得到的错误注意：未定义的索引：图像

Answer 1

要使用ajax发送文件，您需要使用formData：

var vars = new FormData();
vars.append("style", val);
vars.append("image", image);
vars.append("filename", file);
...
data.send(vars);