javascript - Drag and drop zone in JS - File input -

i have problem uploading files in existing form. looking script make possible add multiple files (max 5) , can add @ once 1 5 files. if add 1 one, need add new, not replace previous one.

i got form looking this:

name lastname email phone number interests files 

and filenames created this: name+lastname+phonenumber+filename

and add entry database path of everyfile - done , need drag , drop zone.

i need show added filename , make possible delete added file queue.

but don't want files upload when add them. want upload when submit whole form filename can created , path db can added.

could please provide me script that, or based on scripts 2 topics mentioned before make avaiable want?

i able add 5 files 1 one , described here: html add multiple file input

also able add more @ once described here: https://stackoverflow.com/questions/30499388/dropzone-js-into-another-form

i think example you. app allow drag , drop files gray zone (1 or 5) if click on file name, removes file list.

function init() {      //get dragdrop element      var dd = document.getelementbyid("dragdrop");      //get files element      $files = document.getelementbyid("files");      dd.ondragover = stop;      dd.ondragleave = stop;      if ('filereader' in window) {          document.ondrop = dragaccept;      }        //get form      var $form = document.queryselector("form");      //catch on submit      $form.onsubmit = function (e) {          stop(e);          var fd = new formdata();          //apend files formdata          (var in files){              var file = files[i].file;              var filename = file.name;              var name = "file";              fd.append(name, file, filename);          };          //append inputs formdata          var $inputs = $form.queryselectorall("input");          (var = 0; < $inputs.length; i++) {              var $input = $inputs[i];              fd.append($input.getattribute("name"), $input.value);          }          //send data          var xhr = new xmlhttprequest();          xhr.open('post', '/echo/html/', true);          xhr.send(fd)      }  }    function stop(e) {      e.stoppropagation();      e.preventdefault();  }    function dragaccept(e) {      stop(e);      if (e.datatransfer.files.length > 0)          (var = 0; < e.datatransfer.files.length; i++) {              addfile(e.datatransfer.files[i]);          }  }    //file list store  var files = {};  // html element of file list  var $files = null;  //add file file list  function addfile(file) {      //add files diferent name, max files count 5      if (!(file.name in files) && object.keys(files).length < 5) {          var div = createfile(file.name);          $files.appendchild(div);          files[file.name] = {              file: file,              element: div          }      }  }    //create html element file name  function createfile(name) {      var div = document.createelement("div");      div.innertext = name;      var input = document.createelement("input")      //remove on click      div.addeventlistener("click", function () {          $files.removechild(this);          delete files[name];      })      return div;  }      window.addeventlistener("load", init);

<form method="post" enctype="multipart/form-data" action="">      <label>name<input name="name" /></label>      <label>last name<input name="lastname" /></label>      <label>email<input name="email" /></label>      <div id="dragdrop" style="width: 300px; height: 300px; background-color:lightgray">drag drop zone</div>      <div id="files"></div>      <button type="submit">send</button>  </form>