title: Create a single <input> that handle files and urls at once?
body: <p>I allow my users to import local and remote files, but how can I use a single input to handle both cases ? </p>
  
  <p>Like Stackoverflow, I can do it using tabs :</p>
  
  <p><img src="https://i.stack.imgur.com/bLrHe.png" alt="enter image description here"></p>
  
  <p>Or use radio buttons like :</p>
  
  <pre><code>&lt;style&gt;
      .displayNone {
          display:none;
      }
  &lt;/style&gt;
  
  &lt;form action="test.php"&gt;
      File type:
      &lt;input id="radio-url" name="type" type="radio" checked value="url" /&gt; URL
      &lt;input id="radio-file" name="type" type="radio" value="file" /&gt; File
      &lt;div id="url"&gt;
          &lt;input name="url" type="text" /&gt;
      &lt;/div&gt;
      &lt;div id="file" class="displayNone"&gt;
          &lt;input name="file" type="file" /&gt;
      &lt;/div&gt;
      &lt;input type="submit" value="Send" /&gt;
  &lt;/form&gt;
  
  &lt;script type="text/javascript"&gt;
          $('#radio-url').click(function() {
              $('#url').removeClass('displayNone');
              $('#file').addClass('displayNone');
          });
          $('#radio-file').click(function() {
              $('#file').removeClass('displayNone');
              $('#url').addClass('displayNone');
          });
  &lt;/script&gt;
  </code></pre>
  
  <p>Gives a switchable :</p>
  
  <p><img src="https://i.stack.imgur.com/fYhHl.png" alt="enter image description here"></p>
  
  <p>But how can I create such a field :</p>
  
  <p><img src="https://i.stack.imgur.com/0JCw9.png" alt="enter image description here"></p>
  
  <p>Note for the whole question that the way of handling file on the remote host isn't important.</p>