How To Preview Image Before Upload Jquery

How To Preview Image Before Upload Jquery

How To Preview Image Before Upload Jquery

0 Sales

Free

Preview image feature allows the user to view before uploading the selected image. Preview picture before uploading is a feature most necessary for uploading files. It allows the user before uploading to view the selected file and change the image. Uploading the perfect image or file without repeated uploading is very helpful from the user's perspective.


 

Using JavaScript and jQuery, you can easily add the file upload preview option. Before uploading, we will write some JavaScript and jQuery code in this tutorial to preview image. We will also provide a way to preview any kind of data before uploading the file. Before uploading using jQuery, follow our example script with instructions on preview image.

JavaScript

The sample script contains some JavaScript jQuery, so the jQuery library is included at first.

 

<script src="jquery.min.js"></script>

JavaScript FileReader is used in the filePreview() function to read the file content. Once the file content is loaded, under the file upload form, we will render the preview of the image.

 

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]);

    }

}

Use < embed > tag instead of < img > tag to display all file types. In the reader.onload case, position the following code and delete the existing code.

 

$('#uploadForm + embed').remove();

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

Now call the method filePreview() to modify the output of the file.

 

$("#file").change(function () {

    filePreview(this);

});

 

Place the full JavaScript code after the HTML element.

 

HTML

Easy file input and send button HTML form.

 

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


 

Upload File using PHP

 

Using easy PHP code when the user clicked on the submit button to add the file to the respective folder.

 

if(isset($_POST['submit']) && !empty($_FILES['file']['name'])){

    if(move_uploaded_file($_FILES['file']['tmp_name'],"uploads/".$_FILES['file']['name'])){

        echo 'File has uploaded successfully.';

    }else{

        echo 'Some problem occurred, please try again.';

    }

}

LICENSE OF USE

You can use it for personal or commercial projects. You can't resell it partially or in this form.

PRODUCT INFO

Create Date : May 14, 2020

Updated Date : May 14, 2020

Ratings

Comments : 0

Downloads : 0