[SOLVED] Multiple files upload using AJAX

Multiple files upload using AJAX

I'm working on a webapp and I'm using multiple files upload, but it doesn't work with AJAX. For multiple files upload i use the Apache FileUpload which is working perfectly but after using Ajax the ServletFileUpload.isMultipartContent() returns False.

Thanks for your help

Here is my JSP code :

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8" />
    <title>Envoi des fichiers RNP</title>
        <script src="js/jquery-1.11.3.min.js"></script>
        <script src="js/fileupload.js"></script>

        <link type="text/css" rel="stylesheet" href="css/form.css">
    </head>
    <body>
        <form id="myForm" >
            <fieldset>
                <legend>Envoi de fichier</legend>
                <label for="fichier">Emplacement du premier fichier <span class="requis">*</span></label>
                <input type="file" id="fichier" name="fichiers[]" multiple value="<c:out value="${fichier.nom}"/>"/>
                <span class="erreur">${form.erreurs['fichier']}</span>
                <br />
                <br />
                <input type="submit" value="Envoyer" id="showTable"/>
                <br />
            </fieldset>
        </form>
        <div id="tablediv">
            <table cellspacing="0" id="site2G">
                <tr>
                    <th scope="col">CGI</th>
                    <th scope="col">BSC</th>
                    <th scope="col">Site Name</th>
                    <th scope="col">Cells</th>
                    <th scope="col">EA</th>         
                </tr>
            </table>
        </div>      
    </body>
</html>

and my AJAX code :

 $(document).ready(function() {$("#tablediv").hide();
 $("#myForm").submit(function(event){
     event.preventDefault();

     var formData = new FormData($(this)[0]);

     $.ajax({
            url: "Upload",
            type: 'POST',
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function(responseJson) {
                if(responseJson!=null){
                    $("#site2G").find("tr:gt(0)").remove();
                    var table1 = $("#site2G");
                    $.each(responseJson, function(key,value) {
                         var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td></tr>");
                            rowNew.children().eq(0).text(value['bsc']);
                            rowNew.children().eq(1).text(value['sitename']);
                            rowNew.children().eq(2).text(value['cells']);
                            rowNew.children().eq(3).text(value['cgi']);
                            rowNew.children().eq(4).text(value['ea']);
                            rowNew.appendTo(table1);
                    });
                    }
                }
          });
        $("#tablediv").show();}); });

Solution

You can prefer third party plugins to upload your multiple files to server

A few that i will recommend are

They support

multiple file upload.

progress bar

what to do after file has successfully uploaded

Image preview