File Upload control without any upload button inside an Update panel not working

Hi,

I have asp file upload control without any upload button( i am doing upload at onchange event of file upload control) which is inside an update panel. At onchange event of file upload control a java script function is called where upload is done through a handler. When file upload control is outside update panel it is working but not when placed inside update panel.

I have already googled for this but every where solution given when file upload control is accompanied with upload button but in my case the requirement is to upload file at onchange event of file upload control.

ASPX

<label>AttachFile</label><asp:FileUpload runat="server" ID="file_upload" AllowMultiple="true" onchange="onupload();" TabIndex="7" CssClass="btn-default" />

Javascript function to upload file:

 function onupload() {$(function () {
                var fileUpload = $('#<%=file_upload.ClientID%>').get(0);
                var fileType = document.getElementById('<%=hfTemplateType.ClientID%>').value;
                var templateId = document.getElementById('hftemplateid').value;
                var files = fileUpload.files;
                var test = new FormData();
                for (var i = 0; i < files.length; i++) {
                    test.append(files[i].name, files[i]);
                }
                debugger;$.ajax({
                    url: "../UploadFile.ashx?type=" + fileType + "&templateId=" + templateId,
                    type: "POST",
                    contentType: false,
                    processData: false,
                    data: test,
                    success: function (result) {
                        var masterTable = $find("<%= rgdAttachments.ClientID %>").get_masterTableView();
                        masterTable.rebind();
                        if (result.trim().length > 0) {
                            document.getElementById('<%=hfUploadedFilesPath.ClientID%>').value = result;
                            //  OnbuttonClient();
                        } else {
                            document.getElementById('<%=hfUploadedFilesPath.ClientID%>').value = result;
                            alert("No path returned!");
                        }
                    },
                    error: function (err) {
                        alert("ERROR:" + err.statusText);
                    }
                });
            })
        }