Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Multiple file upload using fineuploader in springs.

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.82k
    Comment on it

    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&#95;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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: