Seo Forum & AI

I want to learn image uploading code in PHP, if you have used it so please share with me the image uploading code, I have already done image uploading but i can't see the preview only details are displaying.

Here is an example code for image uploading in PHP that includes preview functionality:

```php
<!DOCTYPE html>
<html>
<head>
    <title>Image Upload with Preview</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .preview {
            height: 200px;
            width: 200px;
            border: 1px solid #ddd;
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }
        .preview img {
            max-width: 100%;
            max-height: 100%;
        }
    </style>
</head>
<body>
    <form method="POST" action="" enctype="multipart/form-data">
        <input type="file" name="image" id="image" onchange="previewImage(event)">
        <div class="preview">
            <img id="preview" src="" alt="Image Preview">
        </div>
        <input type="submit" name="submit" value="Upload">
    </form>

    <?php
    if(isset($_POST['submit'])){
        $target_dir = "uploads/";
        $target_file = $target_dir . basename($_FILES["image"]["name"]);
        $imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));

        move_uploaded_file($_FILES["image"]["tmp_name"], $target_file);

        echo '<h3>Image Uploaded Successfully!</h3>';
        echo '<img src="'.$target_file.'" alt="Uploaded Image">';
    }
    ?>

    <script>
        function previewImage(event) {
            var reader = new FileReader();
            reader.onload = function(){
                var output = dоcument.getElementById('preview');
                output.src = reader.result;
            };
            reader.readAsDataURL(event.target.files[0]);
        }
    </script>
</body>
</html>
```

In this code, an HTML form is provided to select an image file. When a file is selected, the `previewImage()` JavaScript function is triggered, which reads the selected file and sets its data as the source of the `<img>` tag to display a preview.

After submitting the form, the PHP code handles the image upload process. The uploaded image is moved to the "uploads/" directory and then displayed on the page.

Please note that you may need to create an "uploads" directory in the same directory as this code file for the image to be stored successfully.

By using this code you can upload images .


<?php
if ($_FILES["file"]["error"] > 0)
 {
 echo "Error: " . $_FILES["file"]["error"] . "<br>";
 }
else
 {
 echo "Upload: " . $_FILES["file"]["name"] . "<br>";
 echo "Type: " . $_FILES["file"]["type"] . "<br>";
 echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
 echo "Stored in: " . $_FILES["file"]["tmp_name"];
 }
?>