使用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当你做<?phpif (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 fileformData.append('image', $('input[type=file]')[0].files[0]);现在调用ajax函数$.ajax({&nbsp; &nbsp; url: 'includes/profile/set_image.php',&nbsp; &nbsp; type: 'POST',&nbsp; &nbsp; data: formData,&nbsp; &nbsp; success: function(data) {&nbsp; &nbsp; &nbsp; &nbsp; console.log("successful image update");&nbsp; &nbsp; },&nbsp; &nbsp; error: function(requestObject, error, errorThrown) {&nbsp; &nbsp; &nbsp; &nbsp; console.log(error);&nbsp; &nbsp; &nbsp; &nbsp; console.log(errorThrown);&nbsp; &nbsp; }});