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 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 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 different types of file preview 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.

<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>

jQuery Library

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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 all 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 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