web-dev-qa-db-fra.com

Comment télécharger des fichiers sur le serveur en utilisant JSP / Servlet et Ajax?

Je crée une application Web JSP/Servlet et je voudrais télécharger un fichier sur un Servlet via Ajax. Comment pourrais-je procéder? J'utilise jQuery.

J'ai fait jusqu'à présent:

<form class="upload-box">
    <input type="file" id="file" name="file1" />
    <span id="upload-error" class="error" />
    <input type="submit" id="upload-button" value="upload" />
</form>

Avec cette jQuery:

$(document).on("#upload-button", "click", function() {
    $.ajax({
        type: "POST",
        url: "/Upload",
        async: true,
        data: $(".upload-box").serialize(),
        contentType: "multipart/form-data",
        processData: false,
        success: function(msg) {
            alert("File has been uploaded successfully");
        },
        error:function(msg) {
            $("#upload-error").html("Couldn't upload file");
        }
    });
});

Cependant, il ne semble pas envoyer le contenu du fichier.

jqueryajaxjspservletsfile-upload
19
Nachshon Schwartz

Au point, depuis la version actuelle de XMLHttpRequest telle qu'utilisée par jQuery, il n'est pas possible de télécharger des fichiers en utilisant JavaScript via XMLHttpRequest. La solution de contournement courante consiste à laisser JavaScript créer un <iframe> Masqué et à lui soumettre le formulaire à la place afin de créer l'impression qu'il se produit de manière asynchrone. C'est aussi exactement ce que font la majorité des plugins de téléchargement de fichiers jQuery tels que plugin jQuery Form ( exemple ici ).

En supposant que votre JSP avec le formulaire HTML est réécrit de telle sorte qu'il ne soit pas cassé lorsque le client a désactivé JS (comme vous l'avez maintenant ... ), comme ci-dessous:

<form id="upload-form" class="upload-box" action="/Upload" method="post" enctype="multipart/form-data">
    <input type="file" id="file" name="file1" />
    <span id="upload-error" class="error">${uploadError}</span>
    <input type="submit" id="upload-button" value="upload" />
</form>

Ensuite, c'est avec l'aide du plugin jQuery Form juste une question de

<script src="jquery.js"></script>
<script src="jquery.form.js"></script>
<script>
    $(function() {
        $('#upload-form').ajaxForm({
            success: function(msg) {
                alert("File has been uploaded successfully");
            },
            error: function(msg) {
                $("#upload-error").text("Couldn't upload file");
            }
        });
    });
</script>

En ce qui concerne le côté servlet, aucune tâche spéciale ne doit être effectuée ici. Il suffit de l'implémenter exactement de la même manière que si vous n'utilisez pas Ajax: Comment télécharger des fichiers sur le serveur en utilisant JSP/Servlet?

Vous n'aurez besoin d'une vérification supplémentaire dans le servlet que si l'en-tête X-Requested-With Est égal à XMLHttpRequest ou non, afin que vous sachiez quel type de réponse renvoyer pour le cas où le client a JS désactivé (à partir de maintenant, ce sont principalement les anciens navigateurs mobiles qui ont désactivé JS).

if ("XMLHttpRequest".equals(request.getHeader("X-Requested-With"))) {
    // Return ajax response (e.g. write JSON or XML).
} else {
    // Return regular response (e.g. forward to JSP).
}

Notez que la version relativement récente de XMLHttpRequest 2 est capable d'envoyer un fichier sélectionné à l'aide des nouvelles API File et FormData. Voir aussi Téléchargement de fichiers HTML5 vers Java Servlet et envoi d'un fichier en plusieurs parties via xmlHttpRequest .

21
BalusC

Le code de @ Monsif fonctionne bien si le formulaire n'a que des entrées de type fichier, s'il y a d'autres entrées autres que le type de fichier, alors elles sont perdues. Ainsi, au lieu de copier chaque données de formulaire et de les ajouter à l'objet FormData, le formulaire d'origine lui-même peut être donné au constructeur.

Concernant le code de @ Monsif et https://www.new-bamboo.co.uk/blog/2012/01/10/ridiculously-simple-ajax-uploads-with-formdata/ poste, je est sorti avec le code suivant qui a fonctionné pour moi. J'espère que cela aide quelqu'un d'autre.

<script type="text/javascript">
        var files = null; // when files input changes this will be initiliazed.
        $(function() {
            $('#form2Submit').on('submit', uploadFile);
    });

        function uploadFile(event) {
            event.stopPropagation();
            event.preventDefault();
            //var files = files;
            var form = document.getElementById('form2Submit');
            var data = new FormData(form);
            postFilesData(data);
}

        function postFilesData(data) {
            $.ajax({
                url :  'yourUrl',
                type : 'POST',
                data : data,
                cache : false,
                dataType : 'json',
                processData : false,
                contentType : false,
                success : function(data, textStatus, jqXHR) {
                    alert(data);
                },
                error : function(jqXHR, textStatus, errorThrown) {
                    alert('ERRORS: ' + textStatus);
                }
            });
        }
</script>

Le code html peut ressembler à ceci:

<form id ="form2Submit" action="yourUrl">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br>
<input id="fileSelect" name="fileSelect[]" type="file" multiple accept=".xml,txt">
<br>
  <input type="submit" value="Submit">
</form>
3
Memin

Ce code fonctionne bien pour moi:

$('#fileUploader').on('change', uploadFile);


function uploadFile(event)
        {
            event.stopPropagation(); 
            event.preventDefault(); 
            var files = event.target.files; 
            var data = new FormData();
            $.each(files, function(key, value)
            {
                data.append(key, value);
            });
            postFilesData(data); 
         }
        
function postFilesData(data)
        {
         $.ajax({
        url: 'yourUrl',
        type: 'POST',
        data: data,
        cache: false,
        dataType: 'json',
        processData: false, 
        contentType: false, 
        success: function(data, textStatus, jqXHR)
        {
                //success
        },
        error: function(jqXHR, textStatus, errorThrown)
        {
            console.log('ERRORS: ' + textStatus);
        }
            });
        }
<form method="POST" enctype="multipart/form-data">
        <input type="file" name="file" id="fileUploader"/>
</form>
2
Monsif EL AISSOUSSI

Ce code fonctionne pour moi.

Utilisé le fichier commons io.jar et le fichier commun upload.jar et le plugin de formulaire jQuery

<script>
    $(function() {
        $('#upload-form').ajaxForm({
            success: function(msg) {
                alert("File has been uploaded successfully");
            },
            error: function(msg) {
                $("#upload-error").text("Couldn't upload file");
            }
        });
    });
</script>
<form id="upload-form" class="upload-box" action="upload" method="POST" enctype="multipart/form-data">
    <input type="file" id="file" name="file1" />
    <span id="upload-error" class="error">${uploadError}</span>
    <input type="submit" id="upload-button" value="upload" />
</form>
 boolean isMultipart = ServletFileUpload.isMultipartContent(request);

        if (isMultipart) {
            // Create a factory for disk-based file items
            FileItemFactory factory = new DiskFileItemFactory();

            // Create a new file upload handler
            ServletFileUpload upload = new ServletFileUpload(factory);

            try {
                // Parse the request
                List items = upload.parseRequest(request);
                Iterator iterator = items.iterator();
                while (iterator.hasNext()) {
                    FileItem item = (FileItem) iterator.next();
                    if (!item.isFormField()) {
                        String fileName = item.getName();    
                        String root = getServletContext().getRealPath("/");
                        File path = new File(root + "../../web/Images/uploads");
                        if (!path.exists()) {
                            boolean status = path.mkdirs();
                        }

                        File uploadedFile = new File(path + "/" + fileName);
                        System.out.println(uploadedFile.getAbsolutePath());
                        item.write(uploadedFile);
                    }
                }
            } catch (FileUploadException e) {
                e.printStackTrace();
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }



enter code here
0
Sameera Madushanka