Question

我一直在寻找这个问题的答案几个小时，并尝试了Google搜索的每个例子。

我正在尝试使用JQuery上传文件，它是ASP.Net母版页的一部分。当我在常规页面上测试脚本时，它工作正常。当我把它放在母版页时没有任何反应。

这是我的母版页

<head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.4/jquery-ui.min.js"></script>
        <link href="css/grid.css" rel="stylesheet" type="text/css" />
        <link href="css/style.css" rel="stylesheet" type="text/css" />
        <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300' rel='stylesheet' type='text/css'>
    <style>
            .progressbar {
            width:400px;
            height:15px;
        }
            .progressbarlabel {
                width:400px;
                height:15px;
                position:absolute;
                text-align:center;
                font-size:medium;
                color:red;
            }
    </style>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
    </form>
</body>

这是我的内容页面（Default.aspx）

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
                       <script>
                       $(document).ready(function () {
                           $("<%= uploadFile.ClientID %>").click(function (evt) {
                               var xhr = new XMLHttpRequest();
                               var data = new FormData();
                               var files = $("#singleFile").get(0).files;
                               for (var i = 0; i < files.length; i++) {
                                   data.append(files[i].name, files[i]);
                               }
                               xhr.upload.addEventListener("progress", function (evt) {
                                   if (evt.lengthComputable) {
                                       var progress = Math.round(evt.loaded * 100 / evt.total);
                                       $("#progressbar").progressbar("value", progress);
                                   }
                               }, false);
                               xhr.open("POST", "UploadBlob.ashx");
                               xhr.send(data);

                               $("#progressbar").progressbar({
                                   max: 100,
                                   change: function (evt, ui) {
                                       $("#progresslabel").text($("#progressbar").progressbar("value") + "%");
                                   },
                                   complete: function (evt, ui) {
                                       $("#progresslabel").text("Upload Complete!");
                                   },
                               });
                               evt.preventDefault();
                           });
                       });
    </script>
        <style>
            .progressbar {
            width:400px;
            height:15px;
        }
            .progressbarlabel {
                width:400px;
                height:15px;
                position:absolute;
                text-align:center;
                font-size:medium;
                color:red;
            }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
                                                            <asp:FileUpload ID="singleFile" CssClass="btn-button" AllowMultiple="false" clientIdMode="Static" runat="server" Width="350px" />
                                                        <br />
                                                        <asp:Button ID="uploadFile" runat="server" Text="Upload Picture" clientIdMode="Static" />
                                                        <br />
                                                        <br />
                                                        <div id="progressbar" class="progressbar">
                                                        <div id="progresslabel" class="progressbarlabel">
                                                        </div>
                                                        </div>
                                                <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"
                                                   ControlToValidate="singleFile"
                                                   ErrorMessage="Only .jpg,.png,.gif Files are allowed" Font-Bold="True"
                                                   Font-Size="Medium"
                                                   ValidationExpression="(.*?)\.(jpg|png|gif|JPG|PNG|GIF)$"></asp:RegularExpressionValidator>
</asp:Content>

以下是在Internet Explorer 11中查看的源代码

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.4/jquery-ui.min.js"></script>
        <link href="css/grid.css" rel="stylesheet" type="text/css" /><link href="css/style.css" rel="stylesheet" type="text/css" /><link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300" rel="stylesheet" type="text/css" />
    <style>
            .btn-facebook {
            background-color: hsl(246, 74%, 19%) !important;
            background-repeat: repeat-x;
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#6051e5", endColorstr="#130c54");
            background-image: -khtml-gradient(linear, left top, left bottom, from(#6051e5), to(#130c54));
            background-image: -moz-linear-gradient(top, #6051e5, #130c54);
            background-image: -ms-linear-gradient(top, #6051e5, #130c54);
            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6051e5), color-stop(100%, #130c54));
            background-image: -webkit-linear-gradient(top, #6051e5, #130c54);
            background-image: -o-linear-gradient(top, #6051e5, #130c54);
            background-image: linear-gradient(#6051e5, #130c54);
            border-color: #130c54 #130c54 hsl(246, 74%, 8.5%);
            color: #fff !important;
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.69);
            -webkit-font-smoothing: antialiased;
        }
            .progressbar {
            width:400px;
            height:15px;
        }
            .progressbarlabel {
                width:400px;
                height:15px;
                position:absolute;
                text-align:center;
                font-size:medium;
                color:red;
            }
    </style>

                       <script>
                       $(document).ready(function () {
                           $("uploadFile").click(function (evt) {
                               var xhr = new XMLHttpRequest();
                               var data = new FormData();
                               var files = $("#singleFile").get(0).files;
                               for (var i = 0; i < files.length; i++) {
                                   data.append(files[i].name, files[i]);
                               }
                               xhr.upload.addEventListener("progress", function (evt) {
                                   if (evt.lengthComputable) {
                                       var progress = Math.round(evt.loaded * 100 / evt.total);
                                       $("#progressbar").progressbar("value", progress);
                                   }
                               }, false);
                               xhr.open("POST", "UploadBlob.ashx");
                               xhr.send(data);

                               $("#progressbar").progressbar({
                                   max: 100,
                                   change: function (evt, ui) {
                                       $("#progresslabel").text($("#progressbar").progressbar("value") + "%");
                                   },
                                   complete: function (evt, ui) {
                                       $("#progresslabel").text("Upload Complete!");
                                   },
                               });
                               evt.preventDefault();
                           });
                       });
    </script>
        <style>
            .progressbar {
            width:400px;
            height:15px;
        }
            .progressbarlabel {
                width:400px;
                height:15px;
                position:absolute;
                text-align:center;
                font-size:medium;
                color:red;
            }
    </style>
</head>
<body>
    <form method="post" action="Test_Master.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="form1" enctype="multipart/form-data">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="glgqpmWQpeJYyksP3N0nE40yIBqrlolte3Q3TAmhIXIWSQoToDwu9oSIjEshE7RJN5kPFvU8zK/9elBRlEYJ6H8Nub3kp1NRvFgFIBGK646ypYWQQbVQ0wUgibJ5vUV2zkU37hOutt/A0Djlnn33ymLh3u0MBiWftKRFDBKL9LUEuaf/1OAeawML3sZtDjmcHO1LOWfThjXaR5bBBDfcS8oFE48PM+cCXwlwfFbuICxKpPCN4+A7TG15cbtxrmEio+PCpDVj1rEKPujskSsisA==" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<script src="/WebResource.axd?d=pynGkmcFUV13He1Qd6_TZIW17XFPA72zFs-XRPFjAS8OLOo4XadI9kxFsKWqaIkPRqEQGnTTjZx4c0LHpR-xuA2&amp;t=635589255571259667" type="text/javascript"></script>


<script src="/WebResource.axd?d=x2nkrMJGXkMELz33nwnakHKRERee4fvaxIO7XUfaQICWFXpUDlnpjBhXBfb1m-MvGxV8j2yp0JlWxbfaSC8c-djxGqBCRj0x7coUs4WUKR01&amp;t=635589255571259667" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
//]]>
</script>

<div class="aspNetHidden">

    <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="3571F23D" />
    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="PsSGfqyjblBZIkAOrBqDKDJdQzGutCcYXHVTdhFxxSoiDQH/c7pNPJxG639X0oxqRZ2jKCHIDXv53SlMTUIcmmVrySEtYl34ECjbNI8f3zYHcPZXRyyzi4KhPPFr0yrShVACQCfabsfmaj7shBVXGg==" />
</div>
            <div id="wrapper">
            <!--BEGIN: WRAPPER-->
            <header id="header">
                <!--BEGIN: HEADER-->
                <div class="row top-bar">
                    <div class="medium-6 columns">   
                        <div id="logo" class="logo">
                            <a href="/"><img src="images/logo.png" /></a>
                        </div>
                    </div>


                            <div id="fb_logout">
                                <input type="button" name="ctl00$FacebookButtonLogout" value="Log Out" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$FacebookButtonLogout&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, true))" id="FacebookButtonLogout" class="btn-facebook" />
                            </div>                          
                    </div>
                </div>
                <nav id="navigation"><!-- BEGIN: Navigation -->
                    <div class="row">
                        <ul class="medium-12 columns">
                            <li>
                                <a href="Profile_Page.aspx">Profile</a>
                            </li>
                            <li>
                                <a href="my_rewards_page.html">My Rewards</a>
                            </li>
                            <li>
                                <a href="shopping_cart_page.html">Shopping Cart</a>
                            </li>
                            <li>
                                <a href="Test_Master.aspx">Services</a>
                            </li>
                            <li>
                                <a href="#">Careers</a>
                            </li>
                            <li>
                                <a href="#">Contact Us</a>
                            </li>
                        </ul>
                    </div>
                </nav>
                <!-- END: Navigation -->
            </header>
            <!--END: Header-->

                                                            <input type="file" name="ctl00$ContentPlaceHolder1$singleFile" id="singleFile" class="btn-button" style="width:350px;" />
                                                        <br />
                                                        <input type="submit" name="ctl00$ContentPlaceHolder1$uploadFile" value="Upload Picture" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ContentPlaceHolder1$uploadFile&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="uploadFile" />
                                                        <br />
                                                        <br />
                                                        <div id="progressbar" class="progressbar">
                                                        <div id="progresslabel" class="progressbarlabel">
                                                        </div>
                                                        </div>
                                                <span id="ContentPlaceHolder1_RegularExpressionValidator1" style="font-size:Medium;font-weight:bold;visibility:hidden;">Only .jpg,.png,.gif Files are allowed</span>

            <footer>
                Terms & Conditions     |    Privacy Policy     |    Copyright © 2015 Fingers Crossed Erie. All Rights Reserved.
            </footer>
        <!--END: CAMPUS TOUR-->
        </div>
        <!--END: WRAPPER-->
        <script type="text/javascript" src="js/fastclick.js"></script>
        <script type="text/javascript" src="js/modernizr.js"></script>
        <script type="text/javascript" src="js/plugins.js"></script>
        <script type="text/javascript" src="js/site.js"></script>

<script type="text/javascript">
//<![CDATA[
var Page_Validators =  new Array(document.getElementById("ContentPlaceHolder1_RegularExpressionValidator1"));
//]]>
</script>

<script type="text/javascript">
//<![CDATA[
var ContentPlaceHolder1_RegularExpressionValidator1 = document.all ? document.all["ContentPlaceHolder1_RegularExpressionValidator1"] : document.getElementById("ContentPlaceHolder1_RegularExpressionValidator1");
ContentPlaceHolder1_RegularExpressionValidator1.controltovalidate = "singleFile";
ContentPlaceHolder1_RegularExpressionValidator1.errormessage = "Only .jpg,.png,.gif Files are allowed";
ContentPlaceHolder1_RegularExpressionValidator1.evaluationfunction = "RegularExpressionValidatorEvaluateIsValid";
ContentPlaceHolder1_RegularExpressionValidator1.validationexpression = "(.*?)\\.(jpg|png|gif|JPG|PNG|GIF)$";
//]]>
</script>


<script type="text/javascript">
//<![CDATA[

var Page_ValidationActive = false;
if (typeof(ValidatorOnLoad) == "function") {
    ValidatorOnLoad();
}

function ValidatorOnSubmit() {
    if (Page_ValidationActive) {
        return ValidatorCommonOnSubmit();
    }
    else {
        return true;
    }
}
        //]]>
</script>
</form>
</body>
</html>

Answer 1

使用服务器控件在主页面布局中使用时的ID更改。

您可以执行以下任何操作来使代码正常工作。

使用Html Control而不是Server Control：由于您没有使用任何代码隐藏方法，因此您可以将控件更改为相应的HTML控件以保留其 ID 属性。使用HTML控件也会减少服务器的负担。这控制

<asp:FileUpload ID="singleFile" CssClass="btn-button"
 AllowMultiple="false"  runat="server" Width="350px" />

<asp:Button ID="uploadFile" runat="server" Text="Upload Picture" />

对

 <input type="file" id = "singleFile" class = "btn-Button" width="350px" />
 <input type="button" id= "uploadFile" test="Upload Picture" />

使用ClientIdMode Static 使用此属性会保留服务器控件的原始ID。

<asp:FileUpload ID="singleFile" CssClass="btn-button" AllowMultiple="false"  runat="server" Width="350px"
clientIdMode="Static" />

<asp:Button ID="uploadFile" runat="server" Text="Upload Picture" clientIdMode="Static" />

注意：如果您在转发器或网格中使用它，则需要使用ClientIdMode =“Predictatble”在每行中具有唯一ID。

在同一页面的Javascript中使用ClientId模式表达式。

而不是使用$("#uploadFile")使用$("<%= uploadFile.ClientID %>")，而是对所有控件ID使用类似的模式。这将获得在Javascript / JQuery中使用的动态ID。

Answer 2

您的两个控件都是服务器端控件，即按钮和文件上传器，因此他们的ID将在页面编译期间更改，因此请使用$("<%= uploadFile.ClientID %>"代替$("#uploadFile")或只是将ClientIdMode="Static"添加到两者如果您使用的是.Net 4.0或更高版本的控件。希望这会有所帮助。

使用ASP.Net Master Page的JQuery

2 个答案: