我的代码是一个表单,它从用户那里选择一个文件,然后使用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()
:不能为空
我不明白为什么会抛出这个错误。
发布于 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"];
?>
发布于 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
.
click
事件的绑定更改为form event.submit
。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);
}
});
});
});
发布于 2018-06-30 21:44:48
首先,在表单中插入您的输入文件标签,并使用enctype="multipart/formdata“发送图像,否则将无法发送图像
https://stackoverflow.com/questions/51113850
复制相似问题