javascript - Multiple Image Uploader with Preview -

i've created image uploader it's not working properly. i'm not able understand going wrong. jsfiddle of image uploader given below:

jsfiddle

the problem facing when click on choose files , select more 1 files , open it, wanted show preview of images selected , works when click on delete button deletes preview means if submit files files have deleted uploaded. on hand have click add more images button create 1 more uploader same above when add multiple images not show preview cant select or delete images i've selected mistake. can find going wrong. need add more images button if forget adding images or images in different directory can call 1 more input type files , should function same previous.

so, doing odd things (like using global variable integer assigned i'm assuming using keep track of objects).

i've cleaned had going on, , removed redundant functions. essentially, needed better utilize javascript filereader() function. you'll need take closer @ buttons; didn't fix them you. ;)

what needed iterate through this.files array, , display results using filereader() function. code below.

    $('#add_more').click(function() {        "use strict";        $(this).before($("<div/>", {          id: 'filediv'        }).fadein('slow').append(          $("<input/>", {            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 selected.");          return false;        }          // now, upload files below...        // https://developer.mozilla.org/en-us/docs/using_files_from_web_applications#handling_the_upload_process_for_a_file.2c_asynchronously      });        function deletepreview(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 empty array files reside.        window.filestoupload = [];          if (this.files.length >= 1) {          $("[id^=previewimg]").remove();          $.each(this.files, function(i, img) {            var reader = new filereader(),              newelement = $("<div id='previewimg" + + "' class='abcd'><img /></div>"),              deletebtn = $("<span class='delete' onclick='deletepreview(this, " + + ")'>delete</span>").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");          });        }      });

#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;  }  .abcd {    text-align: center;    position: relative;  }  .abcd img {    height: 200px;    width: 200px;    padding: 5px;    border: 1px solid rgb(232, 222, 189);  }  .delete {    color: red;    font-weight: bold;    position: absolute;    top: 0;    cursor: pointer  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="formdiv">    <div id="filediv">      <input type="file" id="file" name="files[]" multiple="multiple" accept="image/*" title="select images uploaded">      <br>    </div>    <input type="button" id="add_more" class="upload" value="add more images" />    <input type="submit" name="submit" value="add product" class="upload" id="upload" title="add product inventory">  </div>