.php how to display an image that I can change and stock on my directory

Question

Hello, I'm trying to achieve something quite simple in php. I want to get a page that display an image that I can change by sending a new one and that is stocked in the same folder than my php. So when I open my page I'll have the last image uploaded. Idealy I would be able to crop it like the way croppie does (https://foliotek.github.io/Croppie/), but I want to understand the steps so let stay simple, the crop will be for later.

The code I have so far that allow me to upload images is

upload.php:

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

and index.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>

So not only I want to have a preview of the image displayed but I also want to stock only one image with a particular ID (If you want to know why, it's because then it goes straight to indesign, anyway...)

Thanks for your help guys !!!

score 0 · Answer 1 · answered Dec 10 '17 at 18:29

First create in index.html following code

<?php

$path = 'i/';
$tmp_path = 'tmp/';
$types = array('image/gif', 'image/png', 'image/jpeg');
$size = 1024000;

if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
 if (!in_array($_FILES['picture']['type'], $types))
  die('wrong type. <a href="?">maybe another file?</a>');

 // Check size
 if ($_FILES['picture']['size'] > $size)
  die('BIG. <a href="?">maybe another file?</a>');

 // Upload
 if (!@copy($_FILES['picture']['tmp_name'], $path . $_FILES['picture']['name']))
  echo 'wrong';
 else
 echo 'good <a href="' . $path . $_FILES['picture']['name'] . '">see</a> ' ;
}

?>
<!DOCTYPE html>
<html>
 <head>
  <title></title>
 </head>
 <body>
  <form method="post" enctype="multipart/form-data">
 <input type="file" name="picture">
 <input type="submit" value="Upload">
  </form>
 </body>
</html>

It's a shit code. Try to share the php code from html

http://php.net/manual/en/features.file-upload.post-method.php

I get the "wrong" echo when I try this code... – Dec 10 '17 at 19:21 — , Dec 10 '17 at 19:21

score 0 · Accepted Answer · answered Dec 10 '17 at 20:15

SOLUTION I'VE FOUND inspired from that page How to upload & Save Files with Desired name

<form action='' method='POST' enctype='multipart/form-data'>
<input type='file' name='userFile'><br>
<input type='submit' name='upload_btn' value='upload'>
</form>

<?php
$info = pathinfo($_FILES['userFile']['name']);
$ext = $info['extension']; // get the extension of the file
$newname = "newname.".$ext; 

$target = 'images/'.$newname;
move_uploaded_file( $_FILES['userFile']['tmp_name'], $target);
?>

<img src="images/newname.png">

clean and efficient ! works well !

.php how to display an image that I can change and stock on my directory

2 Answers2