title: Get file name of image before upload - JQuery
body: <p>I have a form to upload image with:  </p>
  
  <pre><code>&lt;div class="col-sm-4"&gt;
   &lt;input id="file_input" type="file" style="visibility: hidden; width: 0; height: 0" name="image[photo_new]" accept="image/*"&gt;
  &lt;/div&gt;
  &lt;div class="col-lg-8"&gt;
    &lt;div class="form-group row"&gt;
      &lt;label class="col-sm-3 control-label" for="title"&gt;
        &lt;label for="image_title"&gt;Title&lt;/label&gt;
      &lt;/label&gt;
      &lt;div class="col-sm-9"&gt;
        &lt;input id="title" class="form-control" type="text" placeholder="Title" name="image[title]" maxlength="200"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want when users click to <code>#input_file</code> area to choose image, then the after choosing file, the file name will display immediately in <code>#title</code> field. For example <code>name.png</code> should be <code>name</code>. I want to use JQuery to do this function but don't know how, any advises? Thank in advance.</p>