populating the uploaded file name and size in a html table, appending new values when user choose fi


Question is i have table in which i want to populate the values of file name and file size after user click the choose file button and select any number of files, Now the issue is if the user click choose files button second time i want to append the new values in the table and add the new file in the array so that it can uploaded.. my code is,

<strong>html form code:</strong>

<form id="simpleuploadform" method="post" action="upload" enctype="multipart/form-data"> <table class="span10" border="0"> <tr> <td colspan="3"> <legend>Simple Upload</legend> </td> </tr> <tr> <td> <input type="file" name="files[]" multiple="multiple" onchange="getFileSizeandName(this);"/> <div id="successdiv" hidden="true" class="label label-success">Image uploaded successfully</div> <div id="errordiv" hidden="true" class="label label-error">Image not successfully uploaded</div> <div id="streamdiv" hidden="true" class="label label-warning">Issue while uploading try again</div> </td> <td id="renameFile" align="right"></td> <td id="removeFile" align="right"></td> </tr> <tr> <td colspan="3"> <div id="uploaddiv"> <table id="uploadTable" class="table table-striped table-bordered" width="200" height="200" scrolling="yes"> <thead> <tr> <th>Title</th> <th>Size</th> </tr> </thead> <tbody id="tbodyid"> <tr id="tr0"> <td id="filetd0" height="10px" width="50px"></td> <td id="filesizetd0" height="10px" width="5px"></td> </tr> <tr id="tr1"> <td id="filetd1" height="10px" width="50px"></td> <td id="filesizetd1" height="10px" width="5px"></td> </tr> <tr id="tr2"> <td id="filetd2" height="10px" width="50px"></td> <td id="filesizetd2" height="10px" width="5px"></td> </tr> <tr id="tr3"> <td id="filetd3" height="10px" width="50px"></td> <td id="filesizetd3" height="10px" width="5px"></td> </tr> <tr id="tr4"> <td id="filetd4" height="10px" width="50px"></td> <td id="filesizetd4" height="10px" width="5px"></td> </tr> </tbody> <tfoot> <tr> <td id="filecount" height="10px" width="50px"></td> <td id="totalsize" height="10px" width="5px"></td> </tr> </tfoot> </table> </div> </td> </tr> <tr> <td colspan="3"> <input type="submit" class="btn btn-primary" onClick="CloseAndRefresh();" value="Start Upload" id="startButton" disabled> <input type="reset" class="btn btn-primary" onClick="Clear();" value="Clear" id="clearButton" disabled> <input type="button" class="btn" onClick="window.close();" value="Close"> </td> </tr> </table>

<strong>javascript code:</strong>

<script type="text/javascript"> var totalsizeOfUploadFiles = 0; function getFileSizeandName(input) { var select = $('#uploadTable tbody'); $('#renameFile').empty();$('#removeFile').empty(); if(input.files.length > 0) { $('#renameFile').append($('<a id="renameRec">Rename Selected</a>')); $('#removeFile').append($('<a id="removeRec">Remove Selected</a>')); $('#startButton').removeAttr("disabled", "disabled"); $('#clearButton').removeAttr("disabled", "disabled"); } //if(input.files.length <= 5) //{ for(var i =0; i<input.files.length; i++) { var filesizeInBytes = input.files[i].size; var filesizeInMB = (filesizeInBytes / (1024*1024)).toFixed(2); var filename = input.files[i].name; //alert("File name is : "+filename+" || size : "+filesizeInMB+" MB || size : "+filesizeInBytes+" Bytes"); if(i<=4) { $('#filetd'+i+'').text(filename); $('#filesizetd'+i+'').text(filesizeInMB); } else if(i>4) select.append($('<tr id=tr'+i+'><td id=filetd'+i+'>'+filename+'</td><td id=filesizetd'+i+'>'+filesizeInMB+'</td></tr>')); totalsizeOfUploadFiles += parseFloat(filesizeInMB); $('#totalsize').text(totalsizeOfUploadFiles.toFixed(2)+" MB"); if(i==0) $('#filecount').text("1file"); else { var no = parseInt(i) + 1; $('#filecount').text(no+"files"); } } //} } function CloseAndRefresh() { var daa = '<%=status%>'; if(daa == "true") $('#successdiv').show(); else if(daa == "false") $('#errordiv').show(); else $('#streamdiv').show(); opener.location.reload(true); self.close(); } function Clear() { $('#uploadTable tbody tr td').each(function(){ $(this).text(""); }); $('#uploadTable tfoot tr td').each(function(){ $(this).text(""); }); }

i am trying to do as like this <a href="http://www.shutterfly.com/" rel="nofollow">http://www.shutterfly.com/</a> image upload.

any help will be appreciated, thank you friends...


You are navigating away using javascript, function CloseAndRefresh on clicking submit button.

What actually happens is that the uploading request is being submitted while the CloseAndRefresh function is being executed at almost the same time using different thread. If the upload request is not fast enough, the web page will get refresh first and your upload request get terminated immediately. There is no easy way to prevent this using your existing code.

You should use advanced method of uploading like jQuery uploading plugin to send the request. The plugin provide an binder to execute function on successful/failed submittsion.


Thank you gigadot, i solve the issue as like below,

The html form have the same code as i posted earlier, in the previous js code i have the CloseAndRefresh() method i remove it now from js as well as from the submit button onclick event.

When the form action called the controller, in which i have the code

@RequestMapping(value = "/upload", method = RequestMethod.POST) public String UploadReceipts(@RequestParam("files[]") List<MultipartFile> file, Model model) throws IOException { boolean status = false; try { for(int i=0; i< file.size(); i++) { if(!file.get(i).isEmpty()) { CommonsMultipartFile cm = (CommonsMultipartFile) file.get(i); status = simpleUploadService.uploadFileandSave(cm); model.addAttribute("status", status); } } } catch (IOException e) { status = false; model.addAttribute("status", status); } return "pages/simpleUploadStatus"; }

Now i redirect it to another page in which i throws the appropriate messages for the user. that's all...


  • How to generate a set of unique hash strings in C++?
  • paint app in canvas
  • Overflow hidden with border radius not working in chrome
  • Boostrap responsive table is not responsive inside a “table”
  • Javascript Keyup Search for Div Values
  • chart.js - link to other page when click on specific section in chart
  • Jasny Bootstrap rowlink close modal is not closing?
  • UIBarButtonItem not clickable in UIToolBar
  • Cannot read property 'insertBefore' of null at forEach.after
  • How can I refresh the entire table sorting cache after dynamic table update?
  • applying background to first, and every third row in a dynamically generated table
  • dynamically set table titles with jquery's Datatables plugin - get titles from data object
  • regex, multiline extract in R
  • Windows 8 Metro style ListView auto scroll
  • Is there a way to act before the scroll event?
  • Scrolling News Ticker Jquery - Issues
  • Selectively hide background elements when overlayed with transparent div
  • How to add closing tag for canvas in three js rendered Canvas?
  • Flex items with same property values are rendering in different sizes
  • cell spacing in div table
  • Outlines on links in IE9 remains when focus is changed
  • blade.php method outputting it's result to the form
  • D3 get axis values on zoom event
  • Adjust width of select element according to selected option's width
  • Custom validator control occupying space even though display set to dynamic
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • Change multiple background-images with jQuery
  • MongoDB in PHP using aggregate to group by _id is null not working
  • Adding a button at the bottom of a table view
  • Display issues when we change from one jquery mobile page to another in firefox
  • How to set/get protobuf's extension field in Go?
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • Change an a tag attribute in JavaScript based on screen width
  • How to show dropdown in excel using jrxml (jasper api)?
  • To display the title for the current loaction in map in iphone
  • trying to dynamically update Highchart column chart but series undefined
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • python draw pie shapes with colour filled