How to reset or clear image from fileupload control by java script?

Sometimes we need to reset/clear our image file before Save for choosing another file.
It's very easy to done by using java script. Let's have a look.

java script code:

 <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

    <script type="text/javascript">   
        function resetImage1Field() {
            var $el = $('#FileUpload1'); $el.wrap('<form>').closest('form').get(0).reset();
            $el.unwrap();
        }     

    </script>

HTML code:

 <div class="container">
            <asp:Image ID="Image1" runat="server" Width="150" Height="150"  />
            <br />   <br />
            <asp:FileUpload ID="FileUpload1" CssClass="uploader" runat="server" onchange="ShowImagePreview1(this);" />
            <br />
            <button onclick="resetImage1Field()" class="uploader">Reset Image</button>

        </div>

It's work look like below:

No comments

Powered by Blogger.