title: Multiple image upload with preview and delete option using jQuery
body: <p>I have created a multiple image uploader. Please check my <a href="https://jsfiddle.net/KiranKumarDash/nozry4pw/1/" rel="nofollow">FIDDLE</a>. I am currently able to attach the image, preview them and then also successfully upload them. And also the individual images can be deleted. The problem is when I delete the images, currently my script is only able to delete the image preview but not deleting the files to be uploaded. </p>
  
  <p>To be clear, say if I uploaded 5 images, then all 5 images are previewed. But then If I delete one of the image using the cross that I have on top of every image then it just deletes the preview. So, now if I click on submit then it uploads all 5 images but it should upload only 4.</p>
  
  <p>So, if any one can help me with the script here to delete the files being uploaded and not just the preview.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="formdiv"&gt;
     &lt;div id="filediv"&gt;
       &lt;input type="file" id="file" name="files[]" multiple="multiple" accept="image/*" title="Select Images To Be Uploaded"&gt;
          &lt;br&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>  $('#add_more').click(function() {
            "use strict";
            $(this).before($("&lt;div/&gt;", {
              id: 'filediv'
            }).fadeIn('slow').append(
              $("&lt;input/&gt;", {
                name: 'file[]',
                type: 'file',
                id: 'file',
                multiple: 'multiple',
                accept: 'image/*'
              })
            ));
          });
  
          $('#upload').click(function(e) {
            "use strict";
            e.preventDefault();
  
            if (window.filesToUpload.length === 0 || typeof window.filesToUpload === "undefined") {
              alert("No files are selected.");
              return false;
            }
  
            // Now, upload the files below...
            // https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Handling_the_upload_process_for_a_file.2C_asynchronously
          });
  
          deletePreview = function (ele, i) {
            "use strict";
            try {
              $(ele).parent().remove();
              window.filesToUpload.splice(i, 1);
            } catch (e) {
              console.log(e.message);
            }
          }
  
          $("#file").on('change', function() {
            "use strict";
  
            // create an empty array for the files to reside.
            window.filesToUpload = [];
  
            if (this.files.length &gt;= 1) {
              $("[id^=previewImg]").remove();
              $.each(this.files, function(i, img) {
                var reader = new FileReader(),
                  newElement = $("&lt;div id='previewImg" + i + "' class='previewBox'&gt;&lt;img /&gt;&lt;/div&gt;"),
                  deleteBtn = $("&lt;span class='delete' onClick='deletePreview(this, " + i + ")'&gt;X&lt;/span&gt;").prependTo(newElement),
                  preview = newElement.find("img");
  
                reader.onloadend = function() {
                  preview.attr("src", reader.result);
                  preview.attr("alt", img.name);
                };
  
                try {
                  window.filesToUpload.push(document.getElementById("file").files[i]);
                } catch (e) {
                  console.log(e.message);
                }
  
                if (img) {
                  reader.readAsDataURL(img);
                } else {
                  preview.src = "";
                }
  
                newElement.appendTo("#filediv");
              });
            }
          });
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#formdiv {
    text-align: center;
  }
  #file {
    color: green;
    padding: 5px;
    border: 1px dashed #123456;
    background-color: #f9ffe5;
  }
  #img {
    width: 17px;
    border: none;
    height: 17px;
    margin-left: -20px;
    margin-bottom: 191px;
  }
  .upload {
    width: 100%;
    height: 30px;
  }
  .previewBox {
    text-align: center;
    position: relative;
    width: 150px;
    height: 150px;
    margin-right: 10px;
    margin-bottom: 20px;
    float: left;
  }
  .previewBox img {
    height: 150px;
    width: 150px;
    padding: 5px;
    border: 1px solid rgb(232, 222, 189);
  }
  .delete {
    color: red;
    font-weight: bold;
    position: absolute;
    top: 0;
    cursor: pointer;
    width: 20px;
    height:  20px;
    border-radius: 50%;
    background: #ccc;
  }
  </code></pre>