php - 我在使用 jquery 将图像上传到数据库时在 php 中遇到错误，变量中的数据可能没有传递

Question

我的代码是一个表单，它从用户那里选择一个文件，然后使用 jQuery 将数据发送到一个 PHP 文件，在那里它获取图像内容并显示它，并在一个成功函数中:它提醒从 PHP 接收到的数据文件。例如，从 HTML 页面接收到的图像。

实际上，代码是将图片插入数据库，但是我把代码摘了出来，在PHP文件中插入了一张直接查看图片的图片，没有插入数据库，因为我想短一点(数据库插入代码没有错误:它插入图像提供的其他变量，图像保持空白)

我还在 XAMPP localhost 上使用我的脚本。所以不用担心我像 file://... 一样运行它。只是我无法弄清楚为什么数据没有传递到 php 文件。

HTML:

<input style="border:none" type="file" id="photo" />  <br>

JavaScript:

$("#submit-form").click(function() {
  var formadata = {
    "photo": $("#photo").val(),
  };
  $.ajax({
    url: './enter-registration-form.php',
    data: formadata,
    cache: false,
    contentType: false,
    processData: false,
    method: 'POST',
    success: function(val) {
      if (val == "done") {
        alert("Data Accepted");
      } else {
        alert(val);
      }
    }
  });
});

PHP:

$i = $_FILES['photo']['name'];

//get the content of the image and then add slashes to it
$imagetmp=addslashes (file_get_contents($_FILES['photo']['tmp_name']));

echo '<img src="data:image/jpeg;base64,'.base64_encode($imagetmp).'" style="width:100px;height:autoborder:none">';

现在我收到此错误消息:

Notice: Undefined index: photo in /opt/lampp/htdocs/SSNC/exam/enter-registration-form.php on line 5

Notice: Undefined index: photo in /opt/lampp/htdocs/SSNC/exam/enter-registration-form.php on line 8

Warning: file_get_contents(): Filename cannot be empty in /opt/lampp/htdocs/SSNC/exam/enter-registration-form.php on line 8

我不明白为什么会抛出这个错误。

Answer 1

方法

您需要使用 new FormData() 目的。

The FormData interface provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest.send() method. It uses the same format a form would use if the encoding type were set to "multipart/form-data".

因此，您实际上不必声明表单标签并在其中添加输入，是的，如果您让我们在假设您没有表单标签的情况下进行调用，这会让事情变得更容易。

问题

您脚本中的问题是您的 formdata是 json而不是 FormData()接口(interface)对象，它使用 formdataObject.append()它将新值附加到 FormData 中的现有键上对象，如果键不存在则添加键。

查看下面的代码email , 文件 label和一个 file到 PHP 页面而不使用表单标签作为输入。

没有<form>标签

假设你的 html 看起来像下面没有表单

<label>Your email address:</label>
<input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" />
<br />
<label>Custom file label:</label>
<input type="text" name="filelabel" size="12" maxlength="32" />
<br />
<label>File to stash:</label>
<input type="file" name="file" required />
<input type="button" name="submit" value="Stash the file!" />

您的 javascript 代码如下所示

$(document).ready(function () {
    $("input[name='submit']").on('click', function (event) {

        event.preventDefault();

        //START Append form data
        var data = new FormData();
        data.append(
            'userid', $("input[name='userid']").val());
        data.append(
            'label', $("input[name='filelabel']").val()
        );
        data.append('file', $("input[name='file']")[0].files[0], 'somename.jpg');
        //END append form data

        $.ajax({
            type: "POST",
            url: "file.php",
            data: data,
            processData: false,
            contentType: false,

            success: function (data) {
                console.log("SUCCESS : ", data);
            },
            error: function (e) {
                console.log("ERROR : ", e);
            }
        });

    });

});

还有你的file.php将如下所示

<?php

print_r($_POST);
print_r($_FILES);

当您点击 stash file 时，这应该会在控制台中向您显示文件输入和文件输入。按钮。

与<form>标签

如果您将输入包裹在表单标签内，那么您的代码将在以下部分进行更改

• 更改 click 的绑定(bind)事件形式submit事件。

• 将按钮类型更改为 submit在HTML .

• 获取表单对象。

• 使用表单对象初始化FormData() .

请参阅下面您的 HTML 的外观

<form enctype="multipart/form-data" method="post" name="fileinfo">
    <label>Your email address:</label>
    <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" />
    <br />
    <label>Custom file label:</label>
    <input type="text" name="filelabel" size="12" maxlength="32" />
    <br />
    <label>File to stash:</label>
    <input type="file" name="file" required />
    <input type="submit" value="Stash the file!" />
</form>

你的 javascript 如下所示

$(document).ready(function () {
    $("form").on('submit', function (event) {

        event.preventDefault();
        var form = this;
        var data = new FormData(form);

        $.ajax({
            type: "POST",
            url: "file.php",
            data: data,
            processData: false,
            contentType: false,

            success: function (data) {
                console.log("SUCCESS : ", data);
            },
            error: function (e) {
                console.log("ERROR : ", e);
            }
        });

    });

});