javascript - html input file - how to save selected file when selecting new file? -

i'm trying create upload panel facebook, i've got trouble <input type="file" />.

here facebook upload image panel:

my trouble is: if click add more (like image above), means <input type="file" /> clicked again. so, value overridden.

after that, if click submit button, 1 image can uploaded.

my jquery code upload looks this:

function upload(evt, id) {     var file = document.getelementbyid("file");     var formdata = new formdata();     (i = 0; < file.files.length; i++) {         formdata.append(file.files[i].name, file.files[i]);     }     formdata.append("id", id);      $.ajax({         url: "/home/upload",         type: "post",         datatype: "json",         data: formdata,         contenttype: false,         processdata: false,         success: function (data) {             alert('upload successful...');         },         error: function () {             alert('upload failed...');         }     }); } 

the first line: var file = document.getelementbyid("file");. means: latest value of <input type="file" name="file" id="file" /> (no keep selected file before).

can tell me how selected files? (i don't talk multiple).

thank you!

"my trouble is: if click add more (like image above), means clicked again. so, value overridden."

here's underlying problem script: "you can't set value of file picker script" no direct manipulation of form work https://developer.mozilla.org/en-us/docs/web/html/element/input#file_inputs

you can't manipulate file inputs javascript in meaningful way (for obvious security reasons), can read them. however, can manipulate dom. facebook , other multi-part pickers create , destroy file input elements in order allow flows want, rather try bind file value of input.

there lot of plugins handle complexity you, it's pretty doable working once understand problem you're working around.

further clarification:

yup, sounds you're thinking right now! think of file inputs read-only, , use variable store values, , function deal showing previews in dom reads rather binding directly file input.

one thing add in response but value can append, not remove :((, shouldn't store values in formdata if might need remove values. instead use regular object store values want add/modify, , construct object when user submits form. along lines of this:

var myformdataobject = {}; // can store inputs in // watch onchange , add/remove myformdataobject  function sendstuff(){   var formdata = new formdata();   (var key in myformdataobject) {     formdata.append(key, myformdataobject[key]);   }   // post/put/patch/etc form }