首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用jquery上传图片到数据库时,我在php中遇到错误,变量中的数据可能没有传递

使用jquery上传图片到数据库时,我在php中遇到错误,变量中的数据可能没有传递
EN

Stack Overflow用户
提问于 2018-06-30 18:00:58
回答 3查看 122关注 0票数 3

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

实际上,代码将图像插入到数据库中,但我提取了代码并在PHP文件中插入了图像的直接视图,而没有插入数据库中,因为我想让它更简短(数据库插入代码没有错误:它插入了图像提供的其他变量,而图像保持空白)

我也在XAMPP localhost上使用我的脚本。所以不用担心我会像file://...一样运行它。所有的一切都是我不明白为什么数据没有被传递到php文件。

HTML:

代码语言:javascript
复制
<input style="border:none" type="file" id="photo" />  <br>

JavaScript:

代码语言: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:

代码语言:javascript
复制
$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">';

现在我收到了这个错误消息:

第5行/opt/lampp/htdocs/SSNC/exam/enter-registration-form.php中的索引通知:未定义的索引:photo

第8行的/opt/lampp/htdocs/SSNC/exam/enter-registration-form.php中的索引通知:Undefined photo

在第8行的/opt/lampp/htdocs/SSNC/exam/enter-registration-form.php中,警告文件名:file_get_contents():不能为空

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

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-06-30 19:52:17

这应该行得通!

HTML:

代码语言:javascript
复制
<form id="my-upload-form" method="post" enctype="multipart/form-data">
<input type="file" name="required-image" />
<button> Upload </button>
</form>

JS:

代码语言:javascript
复制
$("button").click(function(e) {
/* prevent default form action */
e.preventDefault();
/* get form element */
var formElement = document.getElementById("my-upload-form");
/* collect all form data from Form element */
var formData = new FormData(formElement);

$.ajax({
url: '/path-to-form-handler.php',
data: formData,
cache: false,
contentType: false,
processData: false,
method: 'POST',
success: function(response) {
    console.log(response);
}
});
});

PHP:

代码语言:javascript
复制
<?php

/* for this example, $_FILES["required-image"] would be an array having image details */
echo $_FILES["required-image"]["name"];
echo $_FILES["required-image"]["type"];
echo $_FILES["required-image"]["tmp_name"];
echo $_FILES["required-image"]["size"];

?>
票数 1
EN

Stack Overflow用户

发布于 2018-07-01 08:40:27

方法

您需要使用new FormData()对象。

FormData接口提供了一种方法,可以轻松地构造一组表示表单域及其值的key/value对,然后可以使用XMLHttpRequest.send()方法轻松地发送这些对。它使用的格式与编码类型设置为"multipart/ form -data“时表单使用的格式相同。

因此,您实际上不必声明一个表单标记并在其中添加输入,是的,如果您让我们在假设您没有表单标记的情况下进行调用,那么它会更容易。

问题

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

参见下面的代码,该代码将email、文件labelfile发布到PHP页面,而不使用表单标签作为输入。

不带<form>标签

假设您的html没有表单,如下所示

代码语言:javascript
复制
<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代码将如下所示

代码语言: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将如下所示

代码语言:javascript
复制
<?php

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

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

带有<form>标签

如果您将输入包装在form标记中,那么您的代码将在以下部分中进行更改

HTML.

  • Get
  • 对象中,将click事件的绑定更改为form event.
  • Change按钮类型为submit
  • 使用form对象初始化FormData().

请看下面HTML的外观

代码语言:javascript
复制
<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将如下所示:

代码语言: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);
            }
        });

    });

});
票数 2
EN

Stack Overflow用户

发布于 2018-06-30 21:44:48

首先,在表单中插入您的输入文件标签,并使用enctype="multipart/formdata“发送图像,否则将无法发送图像

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51113850

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档