<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1250">
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://rawgit.com/dejanstojanovic/JQuery-ImageResize/master/src/jquery.imageresize.js"></script>
    <style type="text/css">
        .images img{
            display:block;
            margin:10px;
        }
    </style>
    <title></title>
</head>
<body>
    <input type="file" class="image-upload"/>
    <div class="images"></div>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".image-upload").ImageResize(
                {
                    maxWidth: 800,
                    onImageResized: function (imageData) {
                        $(".images").append($("<img/>", { src: imageData }));
                    }
                });
        });
    </script>
</body>
</html>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.