Preview Uploaded Image inside User Control using jQuery in ASP.Net

Last Reply 21 days ago By arunkurmi

Posted 22 days ago

i have this user control it works well

but when i drag it twice on same page it mixes up the images upload with one and another

pls advice

<%@  control language="C#" autoeventwireup="true" codebehind="Image_uploadasync_uc.ascx.cs"
    inherits="VendorPanel.usercontrol.Image_uploadasync_uc" %>
<div class="white-bg shadow">
    <h4 class="padding15 no-margin">
        Product Cover Image
    </h4>
    <hr class="no-margin" />
    <br />
    <label class="file-upload">
        <span class="border radius padding15">Select Image</span>
        <asp:FileUpload ID="fubanner" runat="server" />
    </label>
    <span class="pull-right">
        <asp:Image ID="imgbanner" runat="server" Width="100px" /></span>
    <br />
    <br />
    <br />
</div>
<script language="javascript" type="text/javascript">
    $(function () {
        $('[id*=fubanner]').change(function () {
            if (typeof (FileReader) != "undefined") {
                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) {
                            $('[id*=imgbanner]').attr("src", e.target.result).attr("style", "height:100px;width: 100px;");
                        }
                        reader.readAsDataURL(file[0]);
                    } else {
                        alert(file[0].name + " is not a valid image file.");
                        return false;
                    }
                });
            } else {
                alert("This browser does not support HTML5 FileReader.");
            }
        });
    });
</script>

 

<uc1:Image_uploadasync_uc runat="server" ID="Image_uploadasync_uc" />   
<uc1:Image_uploadasync_uc runat="server" ID="Image_uploadasync_uc1" />

 

You are viewing reply posted by: arunkurmi 21 days ago.
Posted 21 days ago

Hi nauna,

Check this sample. now take its reference and correct your code.

HTML

CS.aspx

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('[id*=fileUploadBanner]').change(function () {
            var image = $(this).closest('DIV').find($('[id*=imgBanner]'));
            if (typeof (FileReader) != "undefined") {
                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) {
                            $(image).attr("src", e.target.result).attr("style", "height:100px;width: 100px;");
                        }
                        reader.readAsDataURL(file[0]);
                    } else {
                        alert(file[0].name + " is not a valid image file.");
                        return false;
                    }
                });
            } else {
                alert("This browser does not support HTML5 FileReader.");
            }
        });
    });
</script>
<form id="form1" runat="server">
<div>
    <uc1:UserControl ID="ucFileUpload" runat="server" />
    <uc1:UserControl ID="UserControl1" runat="server" />
</div>
</form>

WebUserControl.ascx

<div class="white-bg shadow">
    <label class="file-upload">
        <span class="border radius padding15">Select Image</span>
        <asp:FileUpload ID="fileUploadBanner" runat="server" />
    </label>
    <span class="pull-right">
    <asp:Image ID="imgBanner" runat="server" Width="100px" /></span>
</div>

Screenshot