I'm trying to upload an image to a database using AJAX and PHP. When I click on a form's submit button, ajax should send the image's information to a php page where it will be inserted into a database. Here's the form for the image upload:
<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>
Then, when I click on the form's submit button/input type, I send an ajax request by calling a function I put the request in:
$(".img-form-container").on("click", "#submit-input", function(e) {
e.preventDefault();
setImage();
}
Here's the setImage()
function:
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);
}
});
}
Finally, in a separate file, I have the PHP code that recieves the AJAX request:
$allowed = ['image/pjpeg', 'image/jpeg', 'image/JPG', 'image/X-PNG', 'image/PNG', 'image/png', 'image/x-png'];
if (in_array($_FILES['image']['type'], $allowed)) {
$sessid= $_REQUEST['sessid'];
$target = "images/".basename($_FILES['image']['name']);
$image = $_FILES['image']['name'];
$q = "INSERT INTO profileimages (image, idUsers) VALUES ('$image', '$sessid')";
$r = mysqli_query($conn, $q);
} else {
echo "<p class='errormsg'>Only JPG and PNG files are permitted.</p>";
}
The problem is that I need the information needed for the $target
and $image
variables, but I don't know how to get it from javascript.
I already tried adding some of the PHP code into the JS function setImage()
to send over to the PHP file, like so:
function setImage() {
<?php
if (isset($_POST['upload'])) {
$target = "images/".basename($_FILES['image']['name']);
$image = $_FILES['image']['name'];
}
?>
var target = "<?php echo $target ?>";
var image = "<?php echo $image?>";
var sessid = "<?php echo $_SESSION['id'] ?>";
$.ajax({
url: 'includes/profile/set_image.php',
type: 'POST',
data: {sessid: sessid, image: image, target: target},
success: function(data) {
console.log("successful image update");
},
error: function(requestObject, error, errorThrown) {
console.log(error);
console.log(errorThrown);
}
});
});
}
but it gives me this error:
<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 />
Basically, I need to get the information from the $target
and $image
variables ($_FILES['image']
, etc.) into a javascript variable. Is there a way I can do this?
This system originally worked when I was building my site with plain PHP, but since I've added AJAX, I'm having trouble editing the code to make it work.
Let me know if it would help to add more code or if I made a mistake while posting the code in.