title: File Upload control OnChange Event JQuery
body: <p>I am trying to build the page to upload the file by using AJAX, JQUERY and .Net HTTPHandler as in <a href="http://dotnet.dzone.com/news/async-file-upload-jquery-and" rel="noreferrer">http://dotnet.dzone.com/news/async-file-upload-jquery-and</a></p>
  
  <p>It works only for the first time I chose a file and uploaded it.  But it doesn't work when I select the file next time and doesn't show any error.</p>
  
  <p>If I change the javascript event binding to the old school way like the following, it works perfectly.  But I want to use the JQuery Binding.  Is there anything I did wrongly?  Thanks.</p>
  
  <pre><code>&lt;input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input" onchange="return ajaxFileUpload();"&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/Bn2bP.png" alt="enter image description here"></p>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None"&gt;
              &lt;AlternatingRowStyle BackColor="White" ForeColor="#284775" /&gt;
              &lt;Columns&gt;
                  &lt;asp:BoundField DataField="StudentID" HeaderText="ID" /&gt;
                  &lt;asp:BoundField DataField="name" HeaderText="Name" /&gt;
                  &lt;asp:TemplateField&gt;
                      &lt;ItemTemplate&gt;                           
                          &lt;input id="fileToUpload" type="file" size="45" name="fileToUpload" class="fileToUpload" &gt;
                      &lt;/ItemTemplate&gt;
                  &lt;/asp:TemplateField&gt;
              &lt;/Columns&gt;
          &lt;/asp:GridView&gt;
  </code></pre>
  
  <p>JQuery Binding Code:</p>
  
  <pre><code>&lt;script&gt;
  
      $().ready(function () {
          $(".fileToUpload").change(function() {
              $.ajaxFileUpload
                  (
                      {
                          url: 'AJaxUploadHandler.ashx',
                          secureuri: false,
                          fileElementId: 'fileToUpload',
                          dataType: 'json',
                          data: { name: 'logan', id: 'id' },
                          success: function (data, status) {
                              if (typeof (data.error) != 'undefined') {
                                  if (data.error != '') {
                                      console.log(data.error);
                                  } else {
                                      console.log(data.msg);
                                  }
                              }
                          },
                          error: function (data, status, e) {
                              alert(e);
                          }
                      }
                  )
  
                  return false;
  
          });
      });
  
  &lt;/script&gt;
  </code></pre>