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: 8358
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>

Download FREE API for Word, Excel and PDF in ASP.Net

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

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Preview and Rotate Image before upload with FileUpload control using jQuery

Company

Explore

Follow us

Contact Us