Kategoria: HTML 5

Aby przed wysłaniem formularza a po wybraniu pliku zobaczyć miniaturkę z podglądem zdjęcia i mieć pewność wybrania właściwego pliku graficznego wykorzystaj poniższy kod HTML i JavaScript:

<img id="uploadPreview" style="width: 100px; height: 100px;" />
<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>

Najczęściej wykorzystywany przeze mnie kod html znajduje się na github:

https://github.com/leemunroe/responsive-html-email-template/blob/master/email.html