Uploading images to server from web page-change error notify

[Dash]

I am using PHP to upload images from my computer to a server file via a web page. The PHP routine works fine and I can see the file being populated with the expected images. However, I would like to change the success and error messages so they print within the web page rather than linking to a white page with the messages printed there (via echo command) that requires the user to hit the back button to return to the original web page. I know this must be possible since I see many web pages printing the messages right next to the "Upload Image" button. How do I do this?

The routine:

HTML:
<form action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form>

PHP:
<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if($check !== false) {
echo "File is an image - " . $check["mime"] . ".";
$uploadOk = 1;
} else {
echo "File is not an image.";
$uploadOk = 0;
}
}
// Check if file already exists
if (file_exists($target_file)) {
echo "Sorry, file already exists.";
$uploadOk = 0;
}
// Check file size
if ($_FILES["fileToUpload"]["size"] > 500000) {
echo "Sorry, your file is too large.";
$uploadOk = 0;
}
// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
$uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
} else {
echo "Sorry, there was an error uploading your file.";
}
}
?>

 

[Anonymous]

Hi,

You can do that by using AJAX to upload the image in the page and update a label with success or failure message.

A quick google, will bring you tutorials like this:

https://code.tutsplus.com/tutorials/uploading-files-with-ajax--net-21077

Hope that helps,
Jon

 

[Dash]

Thanks Jon,
I tried many Google searches and didn't get the page you reference and I like what it does. However, I get the message saying the image was successfully uploaded, but I don't get any images on the page.

First of all, I am unsure of the part after the 1st set of Java Script code where the author says "The rest of the JavaScript will go inside your anonymous self-invoking function." I took that to mean that all the following code will go inside the previous function. I tried that, but maybe I put it all in the wrong place. Since I am new to JS, would you mind showing me what the whole thing should look like.

I also don't get the image in the "uploads" folder referenced by the PHP code.

Thanks for you time,
Rick

 

[Anonymous]

Hi Rick,

Maybe you can share the code you have so far on here?

Thanks,
Jon

 

[Dash]

Hello Jon,
Below is the code have. I get a syntax error in the very last line, but I am unsure what is wrong. Thank you very much for your help with this.

(function () {
var input = document.getElementById("images"),
formdata = false;

if (window.FormData) {
formdata = new FormData();
document.getElementById("btn").style.display = "none";
}
function showUploadedItem (source) {
var list = document.getElementById("image-list"),
li = document.createElement("li"),
img = document.createElement("img");
img.src = source;
li.appendChild(img);
list.appendChild(li);
}
if (input.addEventListener) {
input.addEventListener("change", function (evt) {

var i = 0, len = this.files.length, img, reader, file;
document.getElementById("response").innerHTML = "Uploading . . ."

for ( ; i < len; i++ ) {
file = this.files;
if (!!file.type.match(/image.*/)) {

}
}

}, false);
}
if ( window.FileReader ) {
reader = new FileReader();
reader.onloadend = function (e) {
showUploadedItem(e.target.result);
};
reader.readAsDataURL(file);
}
if (formdata) {
formdata.append("images[]", file);
}
if (formdata) {
$.ajax({
url: "upload1.php",
type: "POST",
data: formdata,
processData: false,
contentType: false,
success: function (res) {
document.getElementById("response").innerHTML = res;
}
});
}

}();

 

[Dash]

Hello Jon,
There seems to be a problem when I post the JS to this forum. In line 24 where it says "file = this.files". Following this.files, there are left and right square brackets that contain an "i". Apparently, this forum won't print the square brackets. The actual JS is exactly what is shown on the web page you suggested.

Rick