how to preview after upload image javascript?

Question

I have 7 images and I want to be able to preview a file (image) before it is uploaded. The preview action should be executed all in the browser without using Ajax to upload the image.

<img src="1.gif" class="img-fluid">
<img src="2.gif" class="img-fluid">
<img src="3.gif" class="img-fluid">
<div class="col-md-2">
    <input name="image" onchange="previewFile()" type="file" class="d-none">
    <?php if (isset($url)) ?>
        <img src="<?= images/user.png ?>"  id="dialog" class="img-fluid rounded-circle cursor-pointer">
    <?php else ?>
        <img src="<?= images/avatar.png ?>" id="dialog" class="img-fluid cursor-pointer">
    <?php } ?>
</div>
<img src="4.gif" class="img-fluid">
<img src="5.gif" class="img-fluid">
<img src="6.gif" class="img-fluid">

javascript

    function previewFile() {
        var preview = document.querySelector('img');
        var file    = document.querySelector('input[type=file]').files[4];
        var reader  = new FileReader();
        reader.addEventListener("load", function () {
            preview.src = reader.result;
            preview.classList.add("rounded-circle h-25");
        }, false);
        if (file) {
            reader.readAsDataURL(file);
        }
    }

    var imgBtn = document.querySelector('#dialog');
    var fileInp = document.querySelector('[type="file"]');

    imgBtn.addEventListener('click', function() {
        fileInp.click();
    })

How can I do this?

This is a duplicate https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded — Tracer69, Sep 11 '20 at 11:12

score 1 · Accepted Answer · answered Sep 11 '20 at 11:33

try this code. nothing big changes in code some logical issue in the following statement.

var file    = document.querySelector('input[type=file]').files[0];

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <input name="image" onchange="previewFile()" type="file" class="d-none">
    <img src=""  id="dialog">
    <script type="text/javascript">
         function previewFile() {
            var preview = document.querySelector('img');
            var file    = document.querySelector('input[type=file]').files[0];
            var reader  = new FileReader();
            reader.addEventListener("load", function () {
                preview.src = reader.result;
                preview.classList.add("rounded-circle h-25");
            }, false);
            if (file) {
                reader.readAsDataURL(file);
            }
        }
    </script>
</body>
</html>

And I have a multiple images. It is index 3 – Mahmoud Khosravi Sep 11 '20 at 11:51 — Mahmoud Khosravi, Sep 11 '20 at 11:51

how to preview after upload image javascript?

1 Answers1