file upload control with image in asp.net gridview

Dear All,

i have a gridview in asp.net with muliple fileupload control and image in it. i bind document name from database .

now i want to do below functionality using jquery.

when i upload file using file upload control in row 1 image should be displayed in an asp:image control in the same row. 

how can i do this? posting code which i tried . it work partially.

 <asp:GridView runat="server" ID="GrdBirthDoc" AutoGenerateColumns="false" ClientIDMode="Static">
                                <Columns>
                                    <asp:TemplateField>
                                        <ItemTemplate>
                                            <asp:Label runat="server" ID="lblDocId" Text='<%#Eval("DOC_ID") %>'></asp:Label>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField HeaderText="Choose File">
                                        <ItemTemplate>
                                            <asp:FileUpload runat="server" ID="FupBirthDoc" onChange="FileUpload(this,'#ImgBirth',15,'jpeg,jpg');"
                                                ClientIDMode="Static" />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField HeaderText="Documents">
                                        <ItemTemplate>
                                            <asp:Label runat="server" ID="lblDocName" Text='<%#Eval("DOC_ENAME") %>'></asp:Label>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField>
                                        <ItemTemplate>
                                            <asp:Label runat="server" ID="lblDocMoc" Text='<%#Eval("DOC_MOC") %>'></asp:Label>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField>
                                        <ItemTemplate>
                                            <asp:Label runat="server" ID="lblRegNo" Text='<%#Eval("REG_NO") %>'></asp:Label>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField>
                                        <ItemTemplate>
                                            <asp:Image runat="server" ID="ImgBirth" ImageUrl='<%#"ImageHandler.ashx?REG_NO="+EVAL("REG_NO")%>'
                                                Width="40PX" Height="40PX" ClientIDMode="Static" />
                                        </ItemTemplate>
                                      
                                    </asp:TemplateField>
                                </Columns>
                            </asp:GridView>
function FileUpload(Finput, ImgCont, Bytes, ext) {
    var cnt = 0, i, fileSize, AllowFileSize, Extension, fname, temp, filerdr;

    ext = ext.toString().toLowerCase();
    Extension = ext.split(',');


    temp = $(Finput).val();
    fname = temp.substring(temp.lastIndexOf('\') + 1);
    fname = temp.substring(temp.lastIndexOf('.') + 1);
    fname = fname.toString().toLowerCase();

    for (i = 0; i < Extension.length; i++) {
        if (Extension[i] != fname) {
            cnt++;
        }
        if (cnt == Extension.length) {
            alert("You Can Upload Files Only With Extension " + ext);
            $(Finput).val('');
            return false;
        }
    }


    AllowFileSize = Number(Bytes) * 1024;


    fileSize = Finput.files[0].size;

    filerdr = new FileReader();
    if (Finput.files && Finput.files[0]) {
        if (fileSize > AllowFileSize) {
            alert("Please Upload File Less Than Or Equal To " + Bytes + " Kb ");
            $(Finput).val('');
            return false;
        }
        else {
            filerdr.onload = function (e) {
                $(ImgCont).attr('src', e.target.result);
            }
            filerdr.readAsDataURL(Finput.files[0]);
        }

    }
}

 

1) Why do you ask the same question in multiple threads? 

http://forums.asp.net/p/2015197/5800154.aspx?Re+insert+multiple+images+to+sql+server+database+ 

2) What do you mean by saying this?

priya15_patel

it work partially.

I am not asking same thing in multiple threads .. read question.. i have asked about displaying an image immediately after click on

upload file button. here i have not asked for displaying image from database at all…..

here i have passed image’s id as ‘#imageid’ to a java script function and it’s clientIdMode="static" is set. that thing is creating problem..

any number of image you upload image will be showed in first row’s image only.that was the QUESTION.

priya15_patel

that thing is creating problem..

What thing? Again, try to describe your problem in more details.   

I have multipl file upload controls and  image in my gridview . please refer below code o=in javascript function

 else {
            filerdr.onload = function (e) {
                $(ImgCont).attr('src', e.target.result);
            }
            filerdr.readAsDataURL(Finput.files[0]);
        }

it sets the image in gridview  at client side as soon as i upload file.  now if i upload file in row 2 it will display file in 1st row’s image control. instead it

should display it in image control  which is in row 2.

Leave a Reply