For multiple file upload, we are using fineuploader plugin with spring mvc. There is need to include the scripts of fineuploader plugin which allow to select the multiple files at a time. And then getting those files as multipart file using @RequestParam("qqfile") MultipartFile file in the controller. After uploading the files we need to create a json object and set the value of success parameter as true using this json object(json1.put("success", true)).
Example:
multiplefileupload.jsp
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<html>
<head>
<title></title>
<link href="${pageContext.servletContext.contextPath}/resources/mytheme/scripts/plupload/jquery.plupload.queue/css/jquery.plupload.queue.css"
rel="stylesheet"
type="text/css" />
<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/resources/mytheme/css/fine-uploader-new.css">
<script src="${pageContext.servletContext.contextPath}/resources/mytheme/js/jquery-2.1.4.min.js"></script>
</head>
<body>
<div align="center">
<h1>Mult fileupload</h1>
<form:form id="myForm" method="post" action="#"enctype="multipart/formdata">
<input type="hidden" name="name" value="manish" />
<input type="button" id="uploadbtn" value="Upload" />
<div id="result"></div>
<div id="fine-uploader-gallery"></div>
<div id="upload_btn"></div>
</form:form>
<script src="{pageContext.servletContext.contextPath}/resources/mytheme/js/jquery.fine-uploader.js"></script>
<script src="{pageContext.servletContext.contextPath}/resources/mytheme/css/fine-uploader-new.css"></script>
<script>
var manualUploader = new qq.FineUploader({
element: document.getElementById('fine-uploader-gallery'),
template: 'qq-template-manual-trigger',
request: {
endpoint: 'uploadfile2',
method: "POST"
},
form:{
element:'myForm'
},
autoUpload: false,
debug: true,
validation: {
allowedExtensions: ['jpeg', 'jpg', 'txt', 'png', 'odt'],
itemLimit: 3
},
callbacks: {
onComplete: function(id, name, responseJSON, maybeXhr) {
if(responseJSON.success=="success")
{
//alert("successfully uploaded");
}
},
onCancel: function(id, name) {
},
onError: function(id, name, reason, maybeXhrOrXdr) {
},
onAllComplete: function(successful, failed) {
}
}
});
</script>
<script type="text/javascript">
$('#uploadbtn').on('click', function() {
//alert("myform ajax call"+"hellooooo");
manualUploader.uploadStoredFiles();
});
</script>
</body>
</html>
Controller,java
@RequestMapping(value = "/uploadfile2", method = RequestMethod.POST)
@ResponseBody
public void multipleUpload( @RequestParam("name") String name,
@RequestParam("qqfile") MultipartFile file, JsonResponse json, HttpServletRequest request, HttpServletResponse response ) throws IllegalStateException, IOException, JSONException {
System.out.println("inside mult***************"+file.getSize());
System.out.println("new demo contrler");
String saveDirectory = "/home/kanikasharma/img/";
try
{
Thread.sleep(1000);
}
catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
String fileName = file.getOriginalFilename();
if (!"".equalsIgnoreCase(fileName)) {
// Handle file content - multipartFile.getInputStream()
file.transferTo(new File(saveDirectory + fileName));
}
JSONObject json1 = new JSONObject();
json1.put("success", true);
response.setCharacterEncoding("UTF-8");
response.setContentType("text");
response.getWriter().print(json1);
response.flushBuffer();
}
0 Comment(s)