使用ajax将图像数据发送到php文件时遇到问题

Question

我正在尝试使用 AJAX 和 PHP 将图像上传到数据库。当我单击表单的提交按钮时，ajax 应该将图像信息发送到一个 php 页面，然后将其插入到数据库中。这是图片上传的表格：<form enctype='multipart/form-data' class='img-form'><input type='hidden' name='size' value='1000000'><input type='file' name='image' id='file-input' class='profile-file'><input type='submit' name='upload' value='Upload Image' id='submit-input'></form>然后，当我点击表单的提交按钮/输入类型时，我通过调用我将请求放入的函数发送一个 ajax 请求：$(".img-form-container").on("click", "#submit-input", function(e) {    e.preventDefault();    setImage();}这是setImage()函数：function setImage() {    var sessid = "<?php echo $_SESSION['id'] ?>";    $.ajax({        url: 'includes/profile/set_image.php',        type: 'POST',        data: {sessid: sessid},        success: function(data) {            console.log("successful image update");        },        error: function(requestObject, error, errorThrown) {            console.log(error);            console.log(errorThrown);        }    });}问题是我需要$target和$image变量所需的信息，但我不知道如何从 javascript 获取它。但它给了我这个错误：<b>Notice</b>:  Undefined index: image in <b>C:\xampp\htdocs\Real Website\profile.php</b> on line <b>127</b><br /><br /><b>Notice</b>:  Undefined index: image in <b>C:\xampp\htdocs\Real Website\profile.php</b> on line <b>128</b><br />基本上，我需要将$target和$image变量（$_FILES['image']等）中的信息放入一个 javascript 变量中。有没有办法做到这一点？这个系统最初是在我用普通的 PHP 构建我的网站时工作的，但是自从我添加了 AJAX，我在编辑代码以使其工作时遇到了麻烦。让我知道添加更多代码是否有帮助，或者我在发布代码时是否犯了错误。

Answer 1

在js中将文件发送到服务器的一个好方法是使用formData：按照这个 https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects

当你做

<?php

if (isset($_POST['upload'])) {

$target = "images/".basename($_FILES['image']['name']);

$image = $_FILES['image']['name'];

}

?>

您尝试检索文件的绝对名称（这里是一个字符串）然后在服务器上您将此文本作为图像文件获取，这就是 PHP 启动 undefined 的原因

$_FILES["图片"]

因为收到的值是一个字符串而不是一个文件。

$_FILES['image']['name'] 包含上传文件的原始名称。

举例：

var form = $('form.img-form')[0];

var formData = new FormData(form);

或为 FormData() 指定确切的数据

var formData = new FormData();

formData.append('size', '1000000');

//Attach file

formData.append('image', $('input[type=file]')[0].files[0]);

现在调用ajax函数

$.ajax({

    url: 'includes/profile/set_image.php',

    type: 'POST',

    data: formData,

    success: function(data) {

        console.log("successful image update");

    },

    error: function(requestObject, error, errorThrown) {

        console.log(error);

        console.log(errorThrown);

    }

});