javascript - Swap multiple uploaded input files -

i try make file upload function in web application.

i made enable upload 3 files on server, still have swapping files issue when try delete files.

first code looks following:

request.jsp

html side

<tr>     <td class="tbcontent" rowspan="3" valign="middle" style="border-style: hidden solid solid solid;">attachment</td>     <td class="tbcontent" valign="middle" style="border-style: hidden solid solid solid;">     <input type="file" id="docfile1" name="docfile1" size="50" style="width:85px;"/></td>     <td class="tbcontent" valign="middle" style="border-style: hidden solid solid hidden;">     <input type="text" readonly="readonly" id="test1" class="test1" style="border:0;"/></td>     <td class="tbcontent" valign="middle" style="border-style: hidden solid solid hidden;">     <button type="button" id="cleardocfile1" style="display:none;">delete</button></td> </tr> <tr>     <td class="tbcontent" valign="middle" style="border-style: hidden solid hidden solid;">     <input type="file" id="docfile2" name="docfile2" size="50" style="display:none; width:85px;"/></td>     <td class="tbcontent" valign="middle" style="border-style: hidden solid solid hidden;">     <input type="text" readonly="readonly" id="test2" class="test2" style="border:0;"/></td>     <td class="tbcontent" valign="middle" style="border-style: hidden solid solid hidden;">     <button type="button" id="cleardocfile2" style="display:none;">delete</button></td> </tr> <tr>     <td class="tbcontent" valign="middle" style="border-style: hidden solid solid solid;">     <input type="file" id="docfile3" name="docfile3" size="50" style="display:none; width:85px;"/></td>     <td class="tbcontent" valign="middle" style="border-style: hidden solid solid hidden;">     <input type="text" readonly="readonly" id="test3" class="test3" style="border:0;"/></td>     <td class="tbcontent" valign="middle" style="border-style: hidden solid solid hidden;">     <button type="button" id="cleardocfile3" style="display:none;">delete</button></td>                  </tr> 

javascript side

var docinput = document.getelementbyid('docfile1'); docinput.addeventlistener("change", getdocumentfileinfo1, false);  function getdocumentfileinfo1() {     var filelist1 = this.files;     ofreader1 = new filereader();     ofreader1.name = filelist1[0].name;     getgetone = ofreader1.name;     ofreader1.size = filelist1[0].size;     console.log("name outside:", ofreader1.name);     console.log("size outside:", ofreader1.size);     $("#filename1").val(ofreader1.name);     $('#test1').val(ofreader1.name);     if (ofreader1 != ""){         $("#docfile2").show();         $("#cleardocfile1").show();         $("#docfile1").hide();     } else {         $("#docfile2").hide();         $("#cleardocfile1").hide();         $("#docfile1").show();     };  };  var docinput2 = document.getelementbyid('docfile2'); docinput2.addeventlistener("change", getdocumentfileinfo2, false);  function getdocumentfileinfo2() {     var filelist2 = this.files;     ofreader2 = new filereader();     ofreader2.name = filelist2[0].name;     getgettwo = ofreader2.name;     ofreader2.size = filelist2[0].size;     console.log("name outside:", ofreader2.name);     console.log("size outside:", ofreader2.size);     $("#filename2").val(ofreader2.name);     $('#test2').val(ofreader2.name);      if (ofreader2 != ""){         $("#docfile3").show();         $("#cleardocfile2").show();         $("#cleardocfile1").hide();         $("#docfile2").hide();     } else if (ofreader2 = undefined) {         $("#docfile3").hide();         $("#cleardocfile2").hide();         $("#cleardocfile1").show();         $("#docfile1").show();     };      if (getgetone == ofreader2.name) {         alert("you cannot attach 2 same files");         $("#docfile2").val("");         $("#filename2").val("");         $("#test2").val("");         $("#cleardocfile1").show();         $("#cleardocfile2").hide();         $("#docfile2").show();         $("#docfile3").hide();     }; };  var docinput3 = document.getelementbyid('docfile3'); docinput3.addeventlistener("change", getdocumentfileinfo3, false);  function getdocumentfileinfo3() {     var filelist3 = this.files;     ofreader3 = new filereader();     ofreader3.name = filelist3[0].name;     getgetthree = ofreader3.name;     ofreader3.size = filelist3[0].size;     console.log("name outside:", ofreader3.name);     console.log("size outside:", ofreader3.size);     $("#filename3").val(ofreader3.name);     $('#test3').val(ofreader3.name);      if (ofreader3 != ""){         $("#cleardocfile1").hide();         $("#cleardocfile2").hide();         $("#cleardocfile3").show();         $("#docfile3").hide();     } else {         $("#cleardocfile1").show();         $("#cleardocfile2").show();         $("#cleardocfile3").hide();         $("#docfile3").show();     };      if (getgetone == ofreader3.name || getgettwo == ofreader3.name) {         alert("you cannot attach 2 same files");         $("#docfile3").val("");         $("#filename3").val("");         $("#test3").val("");         $("#cleardocfile2").show();         $("#cleardocfile3").hide();         $("#docfile3").show();     }; }; 

(skip)

$('#formaddnewdoc').ajaxform();     var options = {         url:"<c:url value='/app/adddocument/files'/>",         type: 'post',         datatype: 'json',         contenttype : "application/json",         beforesubmit: function(arr, $form, options){         options.context = $form;     },     beforesend: function(e) {         e.setrequestheader('token', 'euejrhzkehrkherkhekr');     },     complete: function (data){         var file_name = data.responsetext;         console.log(file_name);          var jsontwo = {             filename1 : $("#filename1").val(),             filename2 : $("#filename2").val(),             filename3 : $("#filename3").val(),             documentid : $("#documentid").val()         };         $.ajax({             contenttype : "application/json",             datatype : 'json',             type : "post",             url : "<c:url value='/app/adddocument/fileinfo'/>",             data : json.stringify(jsontwo),             success : function(jsontwo) {                 if (status){                     toastmessage("add file info", "added file info successfully", constant.toasticonsuccess, constant.toastbottomcenterpos, "");                 } else {                     toastmessage("add file info", "error occurred", constant.toasticonerror, constant.toastbottomcenterpos, "");                 }             }, 

approvalcontroller.java

@requestmapping(value="/adddocument/fileinfo", method=requestmethod.post) @responsebody public boolean adddocumentfile(@requestbody documentfile documentfile) {     try {         //string primary = autoprimarykeyservice.autonumberbytable("document_file", "fileid", autoprimarykey.file);         string anotherone = autoprimarykeyservice.autonumberbytable("document", "documentid", autoprimarykey.approval);         //documentfile.setfileid(primary);         documentfile.setdocumentid(anotherone);         documentfileservice.adddocumentfile(documentfile);          logger.info("added file successfully");         return true;     } catch (exception e) {         logger.error("added file", e.getmessage());         return false;     } }  @requestmapping(value="/adddocument/files") @responsebody public documentfile handlefileupload(         @requestparam(value = "docfile1", required = false) multipartfile docfile1,         @requestparam(value = "docfile2", required = false) multipartfile docfile2,         @requestparam(value = "docfile3", required = false) multipartfile docfile3) {      string primary = autoprimarykeyservice.autonumberbytable("document", "documentid", autoprimarykey.approval);     file file = new file(viewmapper.upload_doc_path + "/" + primary);      string temp1 = viewmapper.upload_doc_path + "/" + primary + "/" + docfile1.getoriginalfilename();     string file_name1 = docfile1.getoriginalfilename();      documentfile filestring = new documentfile();      if (!file.mkdir()){         file.mkdir();     }      if(!docfile1.isempty()){         try {             byte[] bytes = docfile1.getbytes();             bufferedoutputstream stream = new bufferedoutputstream(new fileoutputstream(new file(temp1)));             stream.write(bytes);             stream.close();             filestring.setfilename1(file_name1);              if(!docfile2.isempty()){                 string temp2 = viewmapper.upload_doc_path + "/" + primary + "/" + docfile2.getoriginalfilename();                 string file_name2 = docfile2.getoriginalfilename();                  byte[] bytes2 = docfile2.getbytes();                 bufferedoutputstream stream2 = new bufferedoutputstream(new fileoutputstream(new file(temp2)));                 stream2.write(bytes2);                 stream2.close();                 filestring.setfilename2(file_name2);             }              if(!docfile3.isempty()){                 string temp3 = viewmapper.upload_doc_path + "/" + primary + "/" + docfile3.getoriginalfilename();                 string file_name3 = docfile3.getoriginalfilename();                  byte[] bytes3 = docfile3.getbytes();                 bufferedoutputstream stream3 = new bufferedoutputstream(new fileoutputstream(new file(temp3)));                 stream3.write(bytes3);                 stream3.close();                 filestring.setfilename3(file_name3);             }              documentfile document = new documentfile();             documentfileservice.adddocumentfile(document);              logger.info("uploaded file successfully.");             return filestring;         } catch(exception e) {             logger.error("uploaded file.", e.getmessage());             return null;         }     } else {         logger.info("no file.");         return null;     }        } 

and now, when first launch application, user see screen following:

then if user choose change these

the user can delete last added item, , choose file when he/she delete it.

i want make works when there 3 items, if second 1 deleted, third item becomes second item , third item becomes empty.

before, tried this:

jquery.fn.swapwith = function(to) {     return this.each(function() {         var copy_to = $(to).clone(true);         var copy_from = $(this).clone(true);         $(to).replacewith(copy_from);         $(this).replacewith(copy_to);     }); };  $("#cleardocfile2").on('click', function(){     var temtwo = $("#docfile2").val();     var ttemtwo = $("#filename2").val();     var tttemtwo = $("#test2").val();      var temthree = $("#docfile3").val();     var ttemthree = $("#filename3").val();     var tttemthree = $("#test3").val();      if (temthree == ""){         $("#docfile2").val("");         $("#filename2").val("");         $("#test2").val("");         $("#cleardocfile1").show();         $("#cleardocfile2").hide();         $("#cleardocfile3").hide();         $("#docfile3").hide();         $("#docfile2").show();     } else {         $("#filename2").swapwith("#filename3");         $("#test2").swapwith("#test3");          $("#cleardocfile1").show();         $("#cleardocfile2").show();         $("#cleardocfile3").hide();         $("#docfile3").show();         $("#docfile2").hide();     } }); 

but when tried delete second item out of three, swaps name (also name of third item wasn't empty) , selected file still same, when submit form, both second , third item did not uploaded.

thank in advance.

instead of trying swap values, should remove whole row, , append new one.

as ffar know, there no safe way (in terms of, work) swap values on file-inputs, since include reading , setting file-url code, wich result in serious security-problems. filepath obfuscated, non-present due security concerns in browsers.

enumerated field-names, variables, whatever every time bad sign. don't have experience jsp; php 1 can name 3 fields file[] , php provide me array of values under name of file; don't know wether there similar thing in jsp.

on quick google-search i've found example http://www.codejava.net/java-ee/servlet/java-multiple-files-upload-example jsps seems work without field-names @ all; still can't tell how code is.