使用jquery上传图片到数据库时，我在php中遇到错误，变量中的数据可能没有传递
我的代码是一个表单，它从用户那里选择一个文件，然后使用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">';现在我收到了这个错误消息：
第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()：不能为空
我不明白为什么会抛出这个错误。
回答 3
Stack Overflow用户
发布于 2018-06-30 19:52:17
这应该行得通！
HTML：
<form id="my-upload-form" method="post" enctype="multipart/form-data">
<input type="file" name="required-image" />
<button> Upload </button>
</form>JS：
$("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：
<?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"];
?>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、文件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>标签
如果您将输入包装在form标记中，那么您的代码将在以下部分中进行更改
在HTML.
- Get
- 对象中，将
click事件的绑定更改为form event. - Change按钮类型为
submit。 - 使用form对象初始化
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);
}
});
});
});Stack Overflow用户
发布于 2018-06-30 21:44:48
首先，在表单中插入您的输入文件标签，并使用enctype="multipart/formdata“发送图像，否则将无法发送图像
https://stackoverflow.com/questions/51113850
复制相似问题
腾讯云开发者
