Hi, recently dharmendr gave me the solution shown below and it worked perfect, however, in this example the fileupload input is inside the gridview. Can you please tweak this example where the Fileupload is actually outside of the gridview. Thank you.
<div>
<asp:GridView runat="server" AutoGenerateColumns="false" ID="gvPreview">
<Columns>
<asp:BoundField DataField="Id" HeaderText="Id" />
<asp:TemplateField HeaderText="Files">
<ItemTemplate>
<input id="fileupload" type="file" onchange="SetPreview(this)" />
<asp:ImageButton ID="btnImage" runat="server" Height="100" Width="100" Style="display: none"
CssClass="ImageButton" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div>
<style type="text/css">
.ImageButton
{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
min-height: 30px;
min-width: 30px;
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">
function SetPreview(ele) {
var btnImage = $(ele).closest('tr').find('[id*=btnImage]');
$(btnImage).removeAttr("src");
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
if (regex.test($(ele).val().toLowerCase())) {
if ($.browser.msie && parseFloat(jQuery.browser.version) <= 9.0) {
$(btnImage).show();
$(btnImage)[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $(ele).val();
}
else {
if (typeof (FileReader) != "undefined") {
$(btnImage).show();
var reader = new FileReader();
reader.onload = function (e) {
$(btnImage).attr("src", e.target.result);
}
reader.readAsDataURL($(ele)[0].files[0]);
} else {
alert("This browser does not support FileReader.");
}
}
} else {
alert("Please upload a valid image file.");
}
};
</script>
</div>
