Preview and Rotate Image before upload with FileUpload control using jQuery

nauna

SOLVED CLOSED ACTIVE ANSWERED
User: nauna
Posted: on Mar 04, 2020 11:14 PM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 9281
Sample Code: Download

I am using the below file upload control and script

function is

1. when user browser image it quickly showing the preview in dvpreview

2. i want before uploading the image user in dvpreview it should have button to rotate the images before uploading

so any horizontal image before upload user can correct it

rotate meant horizontal images can be rotate to vertical like flip90 degree on each click

<asp:FileUpload ID="fuicon" runat="server"  accept="image/*" /> 
<div id="dvPreview" runat="server" visible="false">
</div>
<script language="javascript" type="text/javascript">
    $(function () {
        $('[id*=fuUpload1]').change(function () {
            if (typeof (FileReader) != "undefined") {
                var dvPreview = $("#dvPreview");
                dvPreview.html("");
                var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
                $($(this)[0].files).each(function () {
                    var file = $(this);
                    if (regex.test(file[0].name.toLowerCase())) {
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            var img = $("<img />");
                            img.attr("style", " ");
                            img.attr("src", e.target.result);
                            dvPreview.append(img);
                        }
                        reader.readAsDataURL(file[0]);
                    } else {
                        alert(file[0].name + " is not a valid image file.");
                        dvPreview.html("");
                        return false;
                    }
                });
            } else {
                alert("This browser does not support HTML5 FileReader.");
            }
        });
    });
</script>

dharmend...

0 8

Reply
ANSWER
User: dharmendr
Replied: on Mar 05, 2020 07:39 AM
Modified: on Mar 06, 2020 02:55 AM
Report

Hi nauna,

Refer below code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Image Preview Rotation</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#fuUpload").change(function () {
                var dvPreview = $("#dvPreview");
                dvPreview.html("");
                $($(this)[0].files).each(function () {
                    var file = $(this);
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        var divImagePreview = $("<div/>");
                        divImagePreview.attr("style", "display: flex; align-items: center;");

                        var hiddenRotation = $("<input type='hidden' id='hfRotation' value='0' />");
                        divImagePreview.append(hiddenRotation);

                        var btnLeft = $("<button class='left'>Left</button>");
                        divImagePreview.append(btnLeft);

                        var img = $("<img />");
                        img.attr("style", "height: 100px; width: 100px;");
                        img.attr("class", "preview");
                        img.attr("src", e.target.result);
                        divImagePreview.append(img);

                        var btnRight = $("<button class='right'>Right</button>");
                        divImagePreview.append(btnRight);

                        dvPreview.append(divImagePreview);
                        dvPreview.append("<br/>");
                    }
                    reader.readAsDataURL(file[0]);
                });
            });
            $('body').on('click', '.left,.right', function () {
                var hfRotation = $(this).closest('div').find('[id*=hfRotation]');
                var img = $(this).closest('div').find('.preview');
                var rotation = parseInt($(hfRotation).val());
                if ($(this).attr('class') == "left") {
                    rotation = (rotation + 90) % 360;
                } else if ($(this).attr('class') == "right") {
                    rotation = (rotation - 90) % 360;
                }
                $(img).css({ 'transform': 'rotate(' + rotation + 'deg)' });
                $(hfRotation).val(rotation);
            });
        });
    </script>
</head>
<body>
    <input type="file" name="file" id="fuUpload" accept="image/*" multiple="multiple" /><hr />
    <div id="dvPreview"></div>
</body>
</html>

Demo

Preview and Rotate Image before upload with FileUpload control using jQuery

Company

Explore

Follow us

Contact Us