Kategorie
HTML 5

Upload plików – podgląd wybranego pliku

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>

Dodaj komentarz