title: multiple file upload with delete feature
body: <p>I'm trying to build a multiple file upload with delete feature - something like this image:</p>
  
  <p><a href="https://i.stack.imgur.com/RomOR.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RomOR.jpg" alt="enter image description here"></a></p>
  
  <p>I followed <a href="http://jsfiddle.net/WWNnV/638/" rel="nofollow noreferrer">this JS Fiddle example</a>. I am trying to remove the button with id attribute <em>uploadBtn</em> and use native browser file input (for the upload).</p>
  
  <p>So far I have this code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;input type="file" id="uploadFile" name="FileUpload"  multiple="multiple"/&gt;
  &lt;div id="upload_prev"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong>   </p>
  
  <pre><code>$(document).on('click','.close',function(){
      $(this).parents('span').remove();
  
  })
  
  $('#uploadFile').on('change', function() {
  
      var filename = this.value;
      var lastIndex = filename.lastIndexOf("\\");
      if (lastIndex &gt;= 0) {
          filename = filename.substring(lastIndex + 1);
      }
      var files = $('#uploadBtn')[0].files;
      for (var i = 0; i &lt; files.length; i++) {
       $("#upload_prev").append('&lt;span&gt;'+'&lt;div class="filenameupload"&gt;'+files[i].name+'&lt;/div&gt;'+'&lt;p class="close" &gt;X&lt;/p&gt;&lt;/span&gt;');
      }    
  }
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.filenameupload {
      width:98%;  
  }
  
  #upload_prev {
      border:thin solid #000;
      width: 65%;
      padding:0.5em 1em 1.5em 1em;
  }
  
  #upload_prev span {
      display: flex;
      padding: 0 5px;
      font-size:12px;
  }
  </code></pre>
  
  <p>But this can't list the file name with remove feature. what can I correct here?</p>