jQuery not working throwing uncaught typerror

Question

i am receiving this error when running the jquery (from 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

please help me to solve this error.I already try to change the jquery path and redownloaded the file.
what i am trying to do is attach multiple files. below is my full code(got from another tutorial) if i run the same code from another website project it is working fine.

  <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>

Answer 1

Have you got static client IDs switched on? If not, jQuery won't find your control because .NET will generate a different, unique ID for the element when it's rendered to the page.

It does this in order to avoid clashes, in case there are controls with the same ID included in the page, via a master page or user control, for instance. It can only be overridden in .NET 4.0 and above by setting <pages clientIDMode="Static"> in your web.config file (or, you can also specify it per-page or per-control if you prefer). However, the normal scenario is that this is not enabled, letting .NET do the tedious work of preventing your page from being filled with duplicate IDs, which would create invalid HTML.

Assuming this feature has not been enabled, then:

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

would find the control in JavaScript. Therefore

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

ought to get the files the user selected with the control.