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