Upload image and resize using DropDownList using jQuery in ASP.Net

Last Reply on Feb 11, 2016 06:00 AM By Shashikant

Posted on Feb 10, 2016 10:48 PM

hi,

I have requirement that user upload image through file control and it shows in div i know how to do that but before the image upload i want user has option in drop down to selec the height and width of the image and user can actually view the actual size based on selection before upload

 

please advice thanks

Posted on Feb 11, 2016 06:00 AM Modified on on Feb 11, 2016 09:02 AM

Hi,

Please refer below sample.

HTML

<div>
    <style type="text/css">
        #dvPreview
        {
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
            display: none;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script language="javascript" type="text/javascript">
        var Size;
        var fileUploded;
        $(function () {
            $("#fileupload,#ddlSize").change(function () {
                if ($(this).attr('id') == 'ddlSize') {
                    if ($(this).val() != 'Select') {
                        Size = $(this).val();
                    }
                }
                $("#dvPreview").html("");
                var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
                if ($.browser.msie && parseFloat(jQuery.browser.version) <= 9.0) {
                    $("#dvPreview").show();
                    $("#dvPreview")[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $(this).val();
                } else {
                    if (typeof (FileReader) != "undefined") {
                        $("#dvPreview").show();
                        $("#dvPreview").append("<img />");
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            $("#dvPreview img").attr("src", e.target.result);
                            $("[id*=hfImazeSize]").val(Size);
                            $("#dvPreview img").attr("id", "imgUpload");
                            if (Size != null) {
                                var height = Size.split('*')[0];
                                var width = Size.split('*')[1];
                                $("#dvPreview img").css('width', (width + 'in'));
                                $("#dvPreview img").css('height', (height + 'in'));
                            }
                        }
                        if (fileUploded == null) {
                            fileUploded = $(this)[0].files[0];
                        }
                        reader.readAsDataURL(fileUploded);
                    } else {
                        alert("This browser does not support FileReader.");
                    }
                }
            });
        });
    </script>
    <asp:FileUpload ID="fileupload" runat="server" />
    <hr />
    <b>Live Preview</b>
    <br />
    <br />
    <div id="dvPreview">
    </div>
    <asp:DropDownList ID="ddlSize" runat="server">
        <asp:ListItem Text="Select" />
        <asp:ListItem Text="1*1" />
        <asp:ListItem Text="1*2" />
        <asp:ListItem Text="2*3" />
        <asp:ListItem Text="3*3" />
    </asp:DropDownList>
    <br />
    <asp:Button Text="Upload" runat="server" OnClick="Upload" />
    <asp:HiddenField ID="hfImazeSize" runat="server" />
</div>

C#

protected void Upload(object sender, EventArgs e)
{
    using (var image = System.Drawing.Image.FromStream(fileupload.PostedFile.InputStream))
    {
        string Size = hfImazeSize.Value;
        int height = int.Parse(Size.Split('*')[0]);
        int width = int.Parse(Size.Split('*')[1]);
        using (var newImage = ResizeImage(image, width, height))
        {
            newImage.Save(Server.MapPath("Images/img1.jpg"), ImageFormat.Jpeg);
        }
    }
}

public static Bitmap ResizeImage(System.Drawing.Image image, int width, int height)
{
    int widhtInch = (int)image.HorizontalResolution * width;
    int heightInch = (int)image.VerticalResolution * height;
    var destRect = new Rectangle(0, 0, widhtInch, heightInch);
    var destImage = new Bitmap(widhtInch, heightInch);
    destImage.SetResolution(image.HorizontalResolution, image.VerticalResolution);
    using (var graphics = Graphics.FromImage(destImage))
    {
        graphics.CompositingMode = CompositingMode.SourceCopy;
        graphics.CompositingQuality = CompositingQuality.HighQuality;
        graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
        graphics.SmoothingMode = SmoothingMode.HighQuality;
        graphics.PixelOffsetMode = PixelOffsetMode.HighQuality;

        using (var wrapMode = new ImageAttributes())
        {
            wrapMode.SetWrapMode(WrapMode.TileFlipXY);
            graphics.DrawImage(image, destRect, 0, 0, image.Width, image.Height, GraphicsUnit.Pixel, wrapMode);
        }
    }
    return destImage;
}

VB

Protected Sub Upload(sender As Object, e As EventArgs)
    Using image = System.Drawing.Image.FromStream(fileupload.PostedFile.InputStream)
        Dim Size As String = hfImazeSize.Value
        Dim height As Integer = Integer.Parse(Size.Split("*"C)(0))
        Dim width As Integer = Integer.Parse(Size.Split("*"C)(1))
        Using newImage = ResizeImage(image, width, height)
            newImage.Save(Server.MapPath("Images/img1.jpg"), ImageFormat.Jpeg)
        End Using
    End Using
End Sub

Public Shared Function ResizeImage(image As System.Drawing.Image, width As Integer, height As Integer) As Bitmap
    Dim widhtInch As Integer = CInt(image.HorizontalResolution) * width
    Dim heightInch As Integer = CInt(image.VerticalResolution) * height
    Dim destRect = New Rectangle(0, 0, widhtInch, heightInch)
    Dim destImage = New Bitmap(widhtInch, heightInch)
    destImage.SetResolution(image.HorizontalResolution, image.VerticalResolution)
    Using graphics__1 = Graphics.FromImage(destImage)
        graphics__1.CompositingMode = CompositingMode.SourceCopy
        graphics__1.CompositingQuality = CompositingQuality.HighQuality
        graphics__1.InterpolationMode = InterpolationMode.HighQualityBicubic
        graphics__1.SmoothingMode = SmoothingMode.HighQuality
        graphics__1.PixelOffsetMode = PixelOffsetMode.HighQuality

        Using wrapMode__2 = New ImageAttributes()
            wrapMode__2.SetWrapMode(WrapMode.TileFlipXY)
            graphics__1.DrawImage(image, destRect, 0, 0, image.Width, image.Height, _
                GraphicsUnit.Pixel, wrapMode__2)
        End Using
    End Using
    Return destImage
End Function

Screenshot