jQuery没有工作抛出未被捕获的typerror

时间:2017-06-13 14:34:17

标签: jquery asp.net

我在运行jquery时遇到此错误(来自chrome debug)

Uncaught TypeError: Cannot read property 'files' of undefined
    at HTMLInputElement.<anonymous> (Request.aspx:29)
    at HTMLInputElement.dispatch (jquery-2.2.3.js:4737)
    at HTMLInputElement.elemData.handle (jquery-2.2.3.js:4549)
(anonymous) @ Request.aspx:29
dispatch @ jquery-2.2.3.js:4737
elemData.handle @ jquery-2.2.3.js:4549

请帮我解决这个错误。我已经尝试更改jquery路径并重新加载文件 我想要做的是附加多个文件。下面是我的完整代码(来自另一个教程),如果我从另一个网站项目运行相同的代码,它工作正常。

  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.js"></script>
    <script src="../../plugins/jQuery/jquery-2.2.3.min.js"></script>(i tried both)
     <script type="text/javascript">
         $(document).ready(function () {
             $("#btnUpload1").click(function (event) {
                 var files = $("#FileUpload1")[0].files; if (files.length > 0) {
                     var formData = new FormData();
                     for (var i = 0; i < files.length; i++) {
                         formData.append(files[i].name, files[i]);
                     }
                     var progressbarLabel = $('#progressBar-label');
                     var progressbarDiv = $('#progressbar');
                     $.ajax({
                         url: '~/UploadHandler.ashx',
                         method: 'post',
                         data: formData,
                         contentType: false,
                         processData: false,
                         success: function () {
                             progressbarLabel.text('Complete');
                             progressbarDiv.fadeOut(2000);
                         },
                         error: function (err) {
                             alert(err.statusText);
                         }
                     }); progressbarLabel.text('Uploading...');
                     progressbarDiv.progressbar({ value: false }).fadeIn(500);
                 }
             });
         }); </script>



<div class="box-info">
            <div class="form-group">
                <asp:Label ID="Label5" runat="server" Width="150px" Text="Select File" class="col-sm-2 control-label"></asp:Label>
                <asp:FileUpload ID="FileUpload1" runat="server" Width="250px" AllowMultiple="true" /> 
            </div>
        </div>
        <div class="header">
           <input type="button" id="btnUpload1" value="Upload Files" />
       </div>

1 个答案:

答案 0 :(得分:2)

您是否已打开静态客户端ID?如果没有,jQuery将无法找到您的控件,因为.NET会在元素呈现给页面时生成不同的唯一ID。

这样做是为了避免冲突,例如,如果页面中包含相同ID的控件,则通过母版页或用户控件。它只能在.NET 4.0及更高版本中通过在web.config文件中设置<pages clientIDMode="Static">来覆盖(或者,如果您愿意,也可以指定每页或每个控件)。但是,正常情况是这没有启用,让.NET执行繁琐的工作,防止您的页面被重复的ID填充,这会产生无效的HTML。

假设尚未启用此功能,则:

$("#<%= FileUpload1.ClientID %>"); 

会在JavaScript中找到控件。因此

$("#<%= FileUpload1.ClientID %>")[0].files

应该使用控件获取用户选择的文件。