Preview Image Before Upload using jQuery

The preview image feature lets the user view the selected image before upload. With this feature, the image is displayed on the webpage immediately after a file is selected by an input field. Preview image before upload is a very useful feature for the file upload functionality. The preview file helps the user to make sure before uploading the file on the server and change the chosen image file if needed. From the user’s perspective, it is very helpful for uploading a perfect image or file without doing the repetitive upload.

The image preview option can be easily integrated into the file upload functionality using JavaScript and jQuery. Not only the image but also the preview of different file types can be displayed before upload. In this tutorial, we will show you how to display a preview of the image before upload using jQuery.

In the example image preview script, we will implement the file upload functionality with PHP and image preview before upload using jQuery.

File Upload Form

Create an HTML form with a file select field and a submit button.

• Add enctype="multipart/form-data" attribute in the <form> tag to enable file upload.

<form method="post" action="upload.php" enctype="multipart/form-data" id="uploadForm">
    <input type="file" name="file" id="file" />
    <input type="submit" name="submit" value="Upload"/>
</form>

Preview Before Upload using jQuery

jQuery Library:
The jQuery is used to add/remove the preview element to the webpage, so include the jQuery library first.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Read File Data and Generate Preview using JavaScript:
The filePreview() is a custom function that helps to read the raw file data and generate a preview of the file.

• The FileReader object allows reading the content of the file using JavaScript.
• Once the file content is loaded, the image preview is attached to the HTML element using jQuery.

function filePreview(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#uploadForm + img').remove();
            $('#uploadForm').after('<img src="'+e.target.result+'" width="450" height="300"/>');
        };
        reader.readAsDataURL(input.files[0]);
    }
}

If you want to preview different types of files, use <embed> tag instead of <img> tag. Place the following code in the reader.onload() event.

$('#uploadForm + embed').remove();
$('#uploadForm').after('<embed src="'+e.target.result+'" width="450" height="300">');

Display Preview of Selected Image:
Once a file is selected, the preview is displayed using filePreview() function.

• The jQuery change() method triggers the filePreview() function when a file is selected.
• The filePreview() function generates a preview of the selected file and displays it on the web page.

$("#file").change(function () {
    filePreview(this);
});

Upload File to Server using PHP (upload.php)

After the form submission, the selected file is sent to the server-side script to handle the upload process. You can easily upload files to the server using PHP. Use the following PHP code to upload the file to the server using PHP.

• Get the file data using $_FILES in PHP.
• Use move_uploaded_file() function to upload file in PHP.

<?php 
$uploadPath = 'uploads/'; 
if(isset($_POST['submit']) && !empty($_FILES['file']['name'])){ 
    if(move_uploaded_file($_FILES['file']['tmp_name'], $uploadPath.$_FILES['file']['name'])){ 
        echo 'File has been uploaded successfully.'; 
    }else{ 
        echo 'File upload failed, please try again.'; 
    } 
} 
?>

Ajax File Upload using jQuery and PHP