akhileshdarjee/render image file in html5.html

## render image file in html5.html
<!DOCTYPE html>
<html lang="en">
    <body>
        <form name="user-form" id="user-form" enctype="multipart/form-data">
            <input type="file" name="image_file">
            <input type="text" name="name">
            <img src="" id="image_file">
            <button type="button" title="Save" id="save-user">Save</button>
        </form>
        <script type="text/javascript">
            $("form").on("change", "input[type='file']", function() {
                if ($(this).val()) {
                    read_image(this);
                }
            });

            // render image files
            function read_image(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();

                    reader.onload = function (e) {
                        $(input).parent().find('img').attr('src', e.target.result);
                    }

                    reader.readAsDataURL(input.files[0]);
                }
            }
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<body>
	<form name="user-form" id="user-form" enctype="multipart/form-data">
	<input type="file" name="image_file">
	<input type="text" name="name">
	<img src="" id="image_file">
	<button type="button" title="Save" id="save-user">Save</button>
	</form>
	<script type="text/javascript">
	$("form").on("change", "input[type='file']", function() {
	if ($(this).val()) {
	read_image(this);
	}
	});

	// render image files
	function read_image(input) {
	if (input.files && input.files[0]) {
	var reader = new FileReader();

	reader.onload = function (e) {
	$(input).parent().find('img').attr('src', e.target.result);
	}

	reader.readAsDataURL(input.files[0]);
	}
	}
	</script>
	</body>
	</html>