title: make element preview by type of file e.g [img,video,audio]
body: <p>i'm build a web-app chat and i make a upload system on it,
  first i make a image <code>input[type="file"]</code>
  then a record button <code>[upload as wav]</code></p>
  
  <p>example:</p>
  
  <p><a href="https://i.stack.imgur.com/1eoLb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1eoLb.png" alt="enter image description here"></a></p>
  
  <p>anyway i I am viewing files with <code>if(condition)</code> , </p>
  
  <p>example :</p>
  
  <pre><code>         if (data.file == 'audio') {
              $('&lt;audio style="display:block;width:250px;" controls src="' + data.message + '"&gt;&lt;/audio&gt;').appendTo($('.messages ul'));
          }else if (data.file == 'image'){
              $(''&lt;img class="imageChat"   ' +
                  'src="' + filterXSS(data.message) + '"' +
                  'href="' + filterXSS(data.message) + '"' + '&gt;'
                  +).appendTo($('.messages ul'));
  
          }
  </code></pre>
  
  <p>but  what i need is to AUTO-detect file type and create the element based on the type of it ?</p>
  
  <h2>Update:</h2>
  
  <p>example:</p>
  
  <pre><code>showFile('assets/this-is-img.php?a=b') // will return an $('img') element 
  </code></pre>
  
  <p>i know how to get the file type but i need to pass the file type to script and it will return the preview element like img for photos , iframe for PDFs,audio for audios,<code>etc</code></p>
  
  <p>is this possible? 
  thanks in advance :)  </p>