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.
<ol>
<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>
</ol>
what I am trying to build looks like below
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
===================================================
It more likely below link:
<a href="http://milladdagdoni.wordpress.com/2013/07/24/spring-mvc-upload-multiple-files/" rel="nofollow">http://milladdagdoni.wordpress.com/2013/07/24/spring-mvc-upload-multiple-files/</a>
has one input tag for multiple files,
but in my case, I have to show list.
Follow is little progress of my work.
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
Found some multi-file upload example but I need some extra functions(canceling)
I am looking forward an example with below conditions.
<ol>
<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>
</ol>
what I am trying to build looks like below
Code:
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
===================================================
It more likely below link:
<a href="http://milladdagdoni.wordpress.com/2013/07/24/spring-mvc-upload-multiple-files/" rel="nofollow">http://milladdagdoni.wordpress.com/2013/07/24/spring-mvc-upload-multiple-files/</a>
has one input tag for multiple files,
but in my case, I have to show list.
Follow is little progress of my work.
Code:
<html>
<head>
<title>Multi file upload test</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>
<h1>
Upload Files
</h1>
<P> The time on the server is ${serverTime}. </P>
<form id="fileForm" action="#" method="POST" enctype="multipart/form-data">
<div>
<table id="fList">
</table>
</div>
<!--
<input name="inFile" type="file" onchange="javascript:restoreFile()">
-->
<input name="inFile" type="file" multiple="multiple" onchange="javascript:restoreFile()">
<input type="submit" value="upload">
</form>
<h4><a href="#" onclick="javascript:location.href='/upload'"><b>upload.jsp</b></a></h4>
</body>
<script>
function restoreFile(){
var fileName = $("input[name='inFile']").val();
var fileNameWithoutPath = getSeparatedFileName('name', fileName);
var abFileName = fileNameWithoutPath.split('.')[0];
if(fileName != null && fileName.length > 0){
var close_btn = "<button>";
$('#fList').append("<tr id='" + abFileName + "'><td>" + fileNameWithoutPath + "</td>" +
"<td><a href='#' id='" + abFileName + "_rm'>remove</a></td></tr>");
$('#' + 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);
}
}
</script>
</html>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