Displaying the FileUpload Control image in Image Control Inside the GridView

scenario :

  Display the image in the asp Image control while uploading by using Javascript...

  Here you go with the solution.....

function GetImage(field, rowIdx, col) {

             

            var cellValue = 0;

            var currValue = 0; 

            rowIdx = parseInt(rowIdx) + 1;

            var objGridView = document.getElementById('<%=newGrid.ClientID%>');

            cellValue = objGridView.rows[rowIdx].cells[3].children[0];

            cellValue1 = objGridView.rows[rowIdx].cells[3].children[1].value;

            var ext = cellValue1.substring(cellValue1.lastIndexOf('.') + 1);

            if (ext == "gif" || ext == "GIF" || ext == "JPEG" || ext == "jpeg" || ext == "jpg" || ext == "JPG" || ext == "png" || ext == "PNG") {

                objGridView.rows[rowIdx].cells[3].children[0].src = cellValue1;

       

            }

            else {

                alert('Please upload only Image file');

                return false;

               

            }

        }

*********************************************************************************************
For Reference : With out GridView

<asp:Image ID="img" runat="server"/>

<asp:FileUpload ID="up" runat="server" onchange="javascript:Image();" />

<script type="text/javascript" language="javascript">

        function Image() {

            var url = this.document.getElementById('<%=up.ClientID%>').value;

            var ext = url.substring(url.lastIndexOf('.') + 1);

            if (ext == "gif" || ext == "GIF" || ext == "JPEG" || ext == "jpeg" || ext == "jpg" || ext == "JPG" || ext == "png" || ext == "PNG") {

                  this.document.getElementById('<%=img.ClientID%>').src = url;

            }

            else {               

                 alert('Please upload only Image file');

                return false;

            }
        }

Hope this will helps you ...

Happy coding ....