与fileupload相关联的javascript在更新面板中不起作用 [英] javascript associated with fileupload not working in update panel

问题描述

在我的asp.net应用程序中单击fileupload控件时iam使用javascript将文件名绑定到另一个控件。当没有更新面板时它工作正常。但更新面板有问题。请帮助

In my asp.net application when clicking fileupload control iam binding the name of file into another control using javascript.It works fine when there is no update panel.But problem with update panel.Please help

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <contenttemplate>
        <div class="col-lg-5 col-md-5 col-sm-4 col-xs-12 quick_reg ">
            <div class="regform">
                <div class="radio-inline">
                    <label>
                        <asp:RadioButton ID="rbtnJobseekerRegn" Checked="true" runat="server" GroupName="Quick" AutoPostBack="true" />
                        Job Seeker
                    </label>
                </div>
                <div class="radio-inline">
                    <label>
                        <asp:RadioButton ID="rbtnEmployerRegn" runat="server" GroupName="Quick" AutoPostBack="true" />
                        Employer
                    </label>
                </div>
                <h2>Quick Registration</h2>
                <div class="clearfix"></div>
                <div id="divQuickJobseeker"   runat="server">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <asp:TextBox ID="txtJobseekerUserName" runat="server" placeholder="Your Email" CssClass="form-control input-lg1 marg-top5">
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 ">
                        <asp:TextBox ID="txtJobseekerPassword" TextMode="Password" runat="server" placeholder="Password" CssClass="form-control input-lg1 marg-top5">
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <asp:TextBox ID="txtJobseekerMobile" runat="server" placeholder="Mobile" CssClass="form-control input-lg1 marg-top5">
                    </div>
                    <div class="col-lg-4 col-md-2 col-sm-2 col-xs-12">
                        <div class="fileUpload btn btn-default">
                            <asp:FileUpload ID="fuInputFile" runat="server" CssClass="upload" />
                            <span>Attach Resume</span>
                        </div>
                        <input id="uploadFile" class="visible-true" />
                    </div>
                    <div class="col-lg-8 pull-right ">
                        <asp:Label ID="lblstatus" CssClass="text-warning" runat="server" Text="" Visible="false">
                        <asp:Button ID="btnSubmit" runat="server" Text="Submit" class="btn btn-primary pull-right" OnClick="btnSubmit_Click" />
                    </div>
                </div>
                <div id="divQuickEmployer"   runat="server">
                    <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
                        <asp:TextBox ID="txtEmployerUsername" runat="server" placeholder="Your Email" CssClass="form-control input-lg1 marg-top5">
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 ">
                        <asp:TextBox ID="txtEmployerPassword" TextMode="Password" placeholder="Password" runat="server" CssClass="form-control input-lg1 marg-top5">
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <asp:TextBox ID="txtCompanyName" runat="server" placeholder="Company" CssClass="form-control input-lg1 marg-top5">
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <asp:TextBox ID="txtEmployerMobile" runat="server" placeholder="Mobile" CssClass="form-control input-lg1 marg-top5">
                    </div>
                    <div class="col-lg-4 col-md-2 col-sm-2 col-xs-12">
                        <div class="fileUpload btn btn-default">
                            <asp:FileUpload ID="fuEmployer" runat="server" CssClass="upload" />
                            <span>Attach Job Details</span>
                        </div>
                        <input id="txtEmpAttach" class="visible-true" />
                    </div>
                    <div class="col-lg-8 pull-right ">
                        <asp:Label ID="lblEmployerStatus" CssClass="text-warning" runat="server" Text="" Visible="false">
                        <asp:Button ID="btnEmployerRegn" runat="server" Text="Submit" class="btn btn-primary pull-right" OnClick="btnEmployerRegn_Click" />
                    </div>
                </div>
            </div>
        </div>
    </contenttemplate>
</asp:UpdatePanel>

javascript

javascript

<script type="text/javascript">
document.getElementById("fuInputFile").onchange = function () {
    document.getElementById("uploadFile").value = this.value;
};
</script>
<script type="text/javascript">
document.getElementById("fuEmployer").onchange = function () {
    document.getElementById("txtEmpAttach").value = this.value;
};
</script>

推荐答案

做一件事。使用 AsyncFileUpload演示 [ ^ ]



有一个属性 OnClientUploadComplete ，它将触发您选择任何文件时指定的 JavaScript 函数。



喜欢 - OnClientUploadComplete =uploadComplete



在 uploadComplete 内你可以得到 FileName ...

Do one thing. Use AsyncFileUpload Demonstration[^]

There is a property OnClientUploadComplete, which will fire the JavaScript function specified when you select any file.

Like - OnClientUploadComplete="uploadComplete"

Inside the uploadComplete you can get the FileName like...

function uploadComplete(sender, args) {
    debugger;
    document.getElementById('uploadFile').value = args.get_fileName();
}

欲了解更多详情，请阅读 AsyncFileUpload控件 - Ajax控件工具包中的新控件 [ ^ ]。

这篇关于与fileupload相关联的javascript在更新面板中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！