title: Change input file title using bootstrap File Input with jquery
body: <p>I'm working on a process that update a picture with bootstrap file input, everything works fine but i can not achieve change the title of the input file after the process was finished.</p>
  
  <p>For those who don't know bootstrap file input, when the file was choseen the name of the file takes the title of the input file.</p>
  
  <p>I try:</p>
  
  <pre><code>$("#userPicture").prop('title', 'Select picture...');
  </code></pre>
  
  <p>and:</p>
  
  <pre><code>$("#userPicture").attr('title', 'Select picture...');
  </code></pre>
  
  <p>But neither of both works.</p>
  
  <p>This is the container:</p>
  
  <pre><code>&lt;form method="post" id="fileinfo" name="fileinfo" class="form-horizontal" onsubmit="return submitForm();" role="form"&gt;
      &lt;input type="file" id="userPicture" name="userPicture" title="Select picture..." class="btn btn-primary  btn-xs" data-filename-placement="inside"&gt;&lt;br&gt;&lt;br&gt;
      &lt;div style="display:inline-block;"&gt;
          &lt;button type="button" class="btn btn-success btn-block btn-xs" style="width:80px;" id="pictureSave"&gt;Save&lt;/button&gt;
      &lt;/div&gt;
      &lt;div style="display:inline-block;"&gt;
          &lt;div id='loadingmessage' style="font-family: 'Open Sans', sans-serif;font-size:12px;display:none" align="center"&gt;&amp;nbsp;&amp;nbsp;&lt;img src="img/loader.gif"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>This is the function:</p>
  
  <pre><code>$(document).on('click','#pictureSave',function() {
      var studentPicture = $("#userPicture").val();
      var studentId = $("#studentId").val();
      if (studentPicture === "") {
          $("#pictureResponse").html('&lt;p class="text-danger"&gt;You must to select a picture.&lt;/p&gt;');
      } else {        
          $('#loadingmessage').show();
          var fd = new FormData(document.getElementById("fileinfo"));
          fd.append("action", "changeStudentPicture");
          fd.append("studentId", studentId);
          $.ajax({
            url: "content/studentsAction.php",
            type: "POST",
            data: fd,
            enctype: 'multipart/form-data',
            processData: false,
            contentType: false
          }).done(function(data) {
              if (data != "Successful") {
                  $('#loadingmessage').hide();
                  $("#pictureResponse").html('&lt;p class="text-danger"&gt;'+data+'&lt;/p&gt;');
              } else {
                  $('#loadingmessage').hide();
                  $("#userPicture").prop('title', 'Select picture...'); //Here is the issue
                  $("#pictureResponse").html('&lt;p class="text-success"&gt;The picture was updated successfully.&lt;/p&gt;');
              }
          }); 
      }
  });
  </code></pre>
  
  <p>For your information, i found the solution analyzing the <strong>bootstrap.file-input.js</strong></p>
  
  <pre><code>$(".file-input-wrapper input[type=file]").siblings('span').html('Select picture');
  </code></pre>