How to implement muti file upload(with partial remove) in spring 4.x with jsp


Staff member
I am trying to implement a bbs with Spring and jsp.

Found some multi-file upload example but I need some extra functions(canceling)

I am looking forward an example with below conditions.

<li>Users can upload multi files</li>
<li>Users can cancel upload a file(or files) which has already registered.</li>
<li>All of these happen in same page without refreshing.</li>

what I am trying to build looks like below

filename1.ext  ('x' button) 
filename2.ext  ('X' button) 
(input tag with file type)

if press x button the file in same row will be dropped.

What I need is just simple example or hints.

Thanks so much in advanced:D


It more likely below link:

<a href="" rel="nofollow"></a>

has one input tag for multiple files,

but in my case, I have to show list.

Follow is little progress of my work.

    &lt;title&gt;Multi file upload test&lt;/title&gt;
    &lt;script src="//"&gt;&lt;/script&gt;
    &lt;script src="//"&gt;&lt;/script&gt;
    Upload Files

&lt;P&gt;  The time on the server is ${serverTime}. &lt;/P&gt;
&lt;form id="fileForm" action="#" method="POST" enctype="multipart/form-data"&gt;
         &lt;table id="fList"&gt;
    &lt;input name="inFile" type="file" onchange="javascript:restoreFile()"&gt;
    &lt;input name="inFile" type="file" multiple="multiple" onchange="javascript:restoreFile()"&gt;
    &lt;input type="submit" value="upload"&gt;
&lt;h4&gt;&lt;a href="#" onclick="javascript:location.href='/upload'"&gt;&lt;b&gt;upload.jsp&lt;/b&gt;&lt;/a&gt;&lt;/h4&gt;
    function restoreFile(){
        var fileName = $("input[name='inFile']").val();
        var fileNameWithoutPath = getSeparatedFileName('name', fileName);
        var abFileName = fileNameWithoutPath.split('.')[0];

        if(fileName != null &amp;&amp; fileName.length &gt; 0){
            var close_btn = "&lt;button&gt;";
            $('#fList').append("&lt;tr id='" +  abFileName + "'&gt;&lt;td&gt;" + fileNameWithoutPath + "&lt;/td&gt;" + 
                    "&lt;td&gt;&lt;a href='#' id='" +  abFileName + "_rm'&gt;remove&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;");

            $('#' + abFileName + '_rm').on("click", function(e){
                $('#' + abFileName).remove();

    function getSeparatedFileName(type, fileName){
        var fileNames = fileName.split('\\');
        if(type == 'name'){
            return fileNames[fileNames.length - 1];
        }else if(type == 'path'){
            var endIndex = fileName.lastIndexOf('\\');
            return fileName.substring(0, endIndex);

I had tried jquery to show file list. If I do not use multiple="multiple" in input tag, it works. However, after adding that it shows the first member and count only.

Thanks for many help:D