title: How to check duplicate of my input file upload?
body: <p>I have this form which has a button for file upload.  When you select a file it shows at upload_prev div. 
  My problem is that when I try to select the same file nothing happens.  I would like a validation or kind of non duplication function to run.
  I did that. I tried many things and methods like using child nodes and seeing if the inner text is the same.  I tried to loop using jquery each and getting the value, but all of them failed.  I want to display a message that this file is already in the Box of upload_prev when I select it again.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
  
    &lt;script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.js"&gt;&lt;/script&gt;
  
        &lt;link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"&gt;
  
        &lt;link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"&gt;
  
    &lt;style type="text/css"&gt;
      .fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
  }
  
  .fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    background-color: #fff;
    filter: alpha(opacity=0);
  }
  
  .buttonwrap {
    text-align: center;
    padding-top: 20px;
    float: left;
    display: block;
  }
  
  .buttonsend:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #225C51;
  }
  
  .buttonsend {
    text-decoration: none;
    color: #fff;
    font-size: 18px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: rgba(72, 133, 130, .5);
  }
  
  span {
    float: left;
    display: flex;
    width: 100%;
  }
  
  p.closed {
    margin: 0 0 0 7px;
    cursor: pointer;
  }
  
    &lt;/style&gt;
  
    &lt;title&gt;&lt;/title&gt;
  
  &lt;script type='text/javascript'&gt;//&lt;![CDATA[
  
  $(window).load(function(){  
  //  TO CLOSE THE SLECTED FILE
  $(document).on('click', '.close', function() {
    $(this).parents('span').remove();
  })
  
  //JUST TO PUT A VALUE IN THE BOX WHICH HAS 
  document.getElementById("uploadBtn").onchange = function() {
    document.getElementById("uploadFile").value = this.value;
  };
  
  document.getElementById('uploadBtn').onchange = uploadOnChange;
  //document.getElementById('uploadBtn').onchange = myFunction;
  
  
  function uploadOnChange() {
  
    var filename = this.value;
    var lastIndex = filename.lastIndexOf("\\");
    if (lastIndex &gt;= 0) {
      filename = filename.substring(lastIndex + 1);
    }
  
  
  //  alert (filename);
  
    var files = $('#uploadBtn')[0].files;
  
    for (var i = 0; i &lt; files.length; i++) {
      $("#upload_prev").append('&lt;span&gt;' + '&lt;div class="hesh"&gt;' + files[i].name +'&lt;/div&gt;' + '&lt;p class="close"&gt;X&lt;/p&gt;&lt;/span&gt;');
    }
    document.getElementById('filename').value = filename;
  
          document.getElementById("demo").innerHTML = files.length;
  
  }
  
  
  });//]]&gt; 
  
  &lt;/script&gt;
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;FORM METHOD="post" ACTION="" ENCTYPE="multipart/form-data"&gt;
  &lt;!--  &lt;input id="uploadFile" placeholder="Add files from My Computer" class="steptextboxq3" /&gt;--&gt;
    &lt;div class="fileUpload btn btn-primary"&gt;
      &lt;span&gt;Browse&lt;/span&gt;
      &lt;input id="uploadBtn" type="file" class="upload" multiple="multiple" name="browsefile" /&gt;
    &lt;/div&gt;
    &lt;input id="filename" type="text" /&gt;
  
    &lt;div id="upload_prev"&gt;&lt;/div&gt;
  
  
    &lt;div style="clear:both;"&gt;&lt;/div&gt;
    &lt;div class="buttonwrap"&gt;
      &lt;a href="contactus.html" class="buttonsend" style="float:right;"&gt;Send &lt;/a&gt; &lt;/div&gt;
  &lt;/FORM&gt;
  
      &lt;p id="demo"&gt;&lt;/p&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>This is my fiddle. How can I find a way to do this.</p>
  
  <p><a href="https://jsfiddle.net/Lc5gb7c9/" rel="nofollow">https://jsfiddle.net/Lc5gb7c9/</a></p>