ตัวอย่าง Preview

---

<img id="uploadPreview" width="50%" />
<input id="uploadImage" type="file" name="myPhoto" onchange="PreviewImage();" />
<script type="text/javascript">

    function PreviewImage() {
        var oFReader = new FileReader();
        oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);

        oFReader.onload = function (oFREvent) {
            document.getElementById("uploadPreview").src = oFREvent.target.result;
        };
    };

</script>
                            

ตัวอย่าง Multi Preview

---

<div id="preview"></div>
<input id="files" type="file" accept="image/*" multiple>

<script>
    const preview = (file) => {
    const fr = new FileReader();
    fr.onload = () => {
        const img = document.createElement("img");
        img.src = fr.result;  // String Base64 
        img.alt = file.name;
        document.querySelector('#preview').append(img);
    };
    fr.readAsDataURL(file);
    };

    document.querySelector("#files").addEventListener("change", (ev) => {
    if (!ev.target.files) return; // Do nothing.
    [...ev.target.files].forEach(preview);
    });
</script>