[Django]-Preview the photo after selecting the file in Django

6πŸ‘

βœ…

In your django template you can write a small script to display the preview of the image selected by the user.
In template:

<!-- To display image -->
<img id="myimage" src="xyz" > </div>

<!-- To upload new image -->
<input name="images" onchange="readURL(this);" type="file" accept="image/*"/>

In the same template:

<script>
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#myimage').attr('src', e.target.result);
        };

        reader.readAsDataURL(input.files[0]);
    }
}

</script>
πŸ‘€Rajan Sharma

Leave a comment