title: javascript - get the filename and extension from input type=file
body: <p>I have a file upload input and when I click the browse button and select the file, I want the filename and extension to appear in two input text boxes (see code sample). </p>
  
  <p>It works correctly with the extension, but the filename also shows the path which gives me the fakepath warning.  </p>
  
  <p>I understand why, but what's a good way to do this and just get the filename into that box.  I don't need the path.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function getoutput(){
      outputfile.value=inputfile.value.split('.')[0];
      extension.value=inputfile.value.split('.')[1];}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;input id='inputfile' type='file' name='inputfile' onChange='getoutput()'&gt;&lt;br&gt;
      Output Filename &lt;input id='outputfile' type='text' name='outputfile'&gt;&lt;br&gt;
      Extension &lt;input id='extension' type='text' name='extension'&gt;</code></pre>
  </div>
  </div>
  </p>