CODEWITHSUNDEEP
javascriptphphtmlfile-uploadimage-uploading
Bhavna
Bhavna

Reputation: 115

PHP and JS - upload picture not showing

(I am one day old to php so please pardon if this is repeated) I have the code to upload images to my uploads/ directory in the website folder. This is done through index.html and upload.php given below and seen originally from PHP - Upload picture and display on page.

However, I am not able to display the pictures on html page itself as required. It redirects to upload.php with no imageholder there. Any help how to do that? my index.html works fine so I am guessing my php settings should be fine. I followed this , this and this to install and setup everything.

index.html

<!DOCTYPE html>
<html>
<head>
<script language= "javascript" type="text/javascript">
function juploadstop(result){
    console.log(typeof result);
    if(result==0){
        $(".imageholder").html("");
    }
    else if(result!=0){
        $(".imageholder").html("<img src='"+result+"'>");
    }
}
</script>
</head>

<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
    <div class="imageholder"> <!-- a gif image to show that the process wasn't finished -->
    </div>
    Select image to upload:
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
</form>
</body>
</html>

and upload.php

<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$result = $target_file;
$uploadOk = 1;
$imageFileType = 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) {
        $uploadOk = 1;
    } else {
        $uploadOk = 0;
    }
}

if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg") {
    // echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
    $uploadOk = 0;
}


if ($uploadOk == 0) {
    // echo "Sorry, your file was not uploaded.";
} else {
    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
        $result = $target_file;
    } else {
        $result = 0;
    }
}
?>

<script language="javascript" type="text/javascript">
    window.top.window.juploadstop(<?php echo $result; ?>);
</script>

Edit 1 I added 

header("Location: index.html");

to the end of my php code before the php section finishes, and it does not redirect anymore. However, the image still does not display.

Upvotes: 1

Views: 1211

Answers (2)

Ricki-BumbleDev
Ricki-BumbleDev

Reputation: 2256

Looks to me like you're trying to call your "juploadstop" function, that is contained in your JS in the index.html page, from your upload.php. That's not going to work. If you just want to upload and display a picture, you don't even necessarily need to use any JS. Just use a fixed name for your target file, remove your JS, put a simple image tag in your index.html <img src="uploads/yourimage.jpg"> and then put a header("Location: index.html"); at the end of your PHP script, so once the upload has been processed the user will be directed back to the index page.

Upvotes: 0

Darko
Darko

Reputation: 396

You can do that using java script but there's no need for that. Easiest way is with few lines of PHP. Change name of your file from index.html into index.php so you can use PHP in that file.

In your index.php file add this code after you close your form:

<br>
HERE ARE YOUR UPLOADED IMAGES:
<br>
<?php
$dirname = "uploads/";

$images = glob($dirname."*{jpg,png,gif}", GLOB_BRACE);

foreach($images as $image) {
    echo '<img src="'.$image.'" /><br />';
}
?>

<br>

This lines will show all images from uploads folder.

So you will have something like this:

<!DOCTYPE html>
<html>
<head>
<script language= "javascript" type="text/javascript">
function juploadstop(result){
    console.log(typeof result);
    if(result==0){
        $(".imageholder").html("");
    }
    else if(result!=0){
        $(".imageholder").html("<img src='"+result+"'>");
    }
}
</script>
</head>

<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
    <div class="imageholder"> <!-- a gif image to show that the process wasn't finished -->
    </div>
    Select image to upload:
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
</form>
<br>
HERE ARE YOUR UPLOADED IMAGES:
<br>
<?php
$dirname = "uploads/";

$images = glob($dirname."*{jpg,png,gif}", GLOB_BRACE);

foreach($images as $image) {
    echo '<img src="'.$image.'" /><br />';
}
?>

<br>

</body>
</html>

You will also need to add in your upload.php file at the end:

header('Location: index.php');

Make sure to add this before you close PHP tag there.This line will always redirect you on your index page.

Hope this is helpful for you!

Upvotes: 1

Related Questions