使用jQuery上传图像

Question

I am trying to upload and preview images before submit and till now I am able to select multiple images and preview them before submit. Now there are some problem I am facing. Listed below:

1. When I click on 'x' button to remove an image, its only removing the preview and not the selected image.

2. If I select same image twice for ex. abc.jpg, def.jpg, hij.jpg, abc.jpg then removing one abc.jpg is also removing the other abc.jpg

3. Images are not indexed on the basis of selection. In simple words, if I select hij.jpg 1st then abc.jpg second followed by def.jpg at third position, then it should be serially indexed as 1, 2, 3 respectively.

4. Verification for image extensions. Like only JPG, JPEG, PNG and GIF files can be uploaded.

I tried to be as clear as possible. Below are the code I am using.

HTML:

<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="newstatus" runat="server">
    <div style="display: inline-flex">
    <div style="width: 160px">
      <input type="file" name="images[]" id="file-5" class="inputfile inputfile-4" data-multiple-caption="{count} files selected" multiple />
      <label for="file-5"> 
      <span style="display: none;">Choose a file&hellip;</span></label>
      </div>
      <input type="submit" name="post" value="Post" class="post-btn" id="submit" />
    </div>
    <div style="clear:both;"></div>
    <div id="imgs"></div>
  </form>

jQuery:

$(document).ready(function(){
     $("#file-5").on('change',function() {
     var fileList = this.files;
     for(var i = 0; i < fileList.length; i++){
          var t = window.URL || window.webkitURL;
          var objectUrl = t.createObjectURL(fileList[i]);
          $('.removeimg').fadeIn();
          $('#imgs').append('<span class="img_'+i+'" onclick="del('+i+')" style="cursor:pointer; margin-right: 3px;"><b>x</b></span><img class="img_'+i+'" src="' + objectUrl + '" width="150" height="150" style="margin-right: 3px;">');
          j = i+1;
          if(j % 3 == 0)
          {
            $('#imgs').append('<br>');
          }
        }
    });
});

// To Remove Image (but its only removing the preview and not the image)
function del(i){ 
    $('.img_'+i).fadeOut("slow", function() { $('.img_'+i).remove();});
}

Thanks in advance!