I am looking for some script, that will allow me to preview image before uploading it AND delete selected images, before uploading it. It will be placed in a Wordpress front end page. I want images to be posted together with the rest of form fields.

```js
(function($) {
  $(document).ready(function() {
    $("#gallery").on('change', function() {
      //Get count of selected files
      var countFiles = $(this)[0].files.length;
      var imgPath = $(this)[0].value;
      var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
      var image_holder = $("#image-holder");
      image_holder.empty();
      if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
        if (typeof(FileReader) != "undefined") {
          //loop for each file selected for uploaded.
          for (var i = 0; i < countFiles; i++) {
            var reader = new FileReader();
            reader.onload = function(e) {
              $("<img />", {
                "src": e.target.result,
                "class": "thumb-image"
              }).appendTo(image_holder);
            }
            image_holder.show();
            reader.readAsDataURL($(this)[0].files[i]);
          }
        } else {
          alert("This browser does not support FileReader.");
        }
      } else {
        alert("Pls select only images");
      }
    });
  });
})(jQuery);
```

```css
img.thumb-image {
  height: 100px;
  margin: 3px;
  border: 1px solid #cbcbcb;
  padding: 4px;
  border-radius: 5px;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="input-group">
  <span class="input-group-btn">
    <span class="btn btn-primary btn-file">
      <input name="gallery[]" id="gallery" multiple type="file">
    </span>
  </span>
  <div id="image-holder"></div>
</div>
```