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

je crée une application web JSP/Servlet et j'aimerais télécharger un fichier vers un Servlet via Ajax. Comment pourrais-je aller sur le faire? Je suis à l'aide de 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 ce 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.

17
demandé sur StuartJ 2011-08-02 19:01:13

4 réponses

au point, à partir de l'actuel XMLHttpRequest version 1 tel qu'utilisé par jQuery, il est pas possible de télécharger des fichiers en utilisant JavaScript par XMLHttpRequest . La solution courante est de laisser JavaScript créer un <iframe> caché et soumettre le formulaire à elle à la place de sorte que l'impression est créée que cela se produit asynchrone. C'est aussi exactement ce que font la majorité des plugins de téléchargement de fichiers jQuery tels que jQuery form plugin ( exemple ici ).

en supposant que votre JSP avec le formulaire HTML est réécrit de telle manière qu'il ne soit pas cassé quand 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>

puis c'est avec l'aide de jQuery form plugin 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, il n'est pas nécessaire de faire quelque chose de spécial ici. Mettre en œuvre c'est exactement comme vous le feriez si vous n'utilisiez pas Ajax: comment télécharger des fichiers vers le serveur en utilisant JSP/Servlet?

vous n'aurez besoin d'un contrôle supplémentaire dans le servlet que si l'en-tête X-Requested-With est égal ou inférieur à XMLHttpRequest , de sorte que vous savez quel type de réponse retourner pour le cas où le client a désactivé JS (à l'heure actuelle, ce sont surtout les navigateurs mobiles plus anciens 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 relativement nouvelle version 2 de XMLHttpRequest est capable d'envoyer un fichier sélectionné en utilisant les nouveaux API File et FormData . Voir aussi HTML5 de Téléchargement de Fichiers Java Servlet et l'envoi d'un fichier en plusieurs parties par le biais de xmlHttpRequest .

19
répondu BalusC 2017-05-23 12:32:32

ce code fonctionne très 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
répondu Monsif EL AISSOUSSI 2015-11-24 14:04:54

le code de @Monsif fonctionne bien si le formulaire n'a que des entrées de type de fichier, s'il y a d'autres entrées autre que type de fichier, alors ils se perdent. Ainsi, au lieu de copier chaque donnée de forme et de les ajouter à L'objet FormData, la forme originale elle-même peut être donnée au constructeur.

concernant le code de @Monsif et https://www.new-bamboo.co.uk/blog/2012/01/10/ridiculously-simple-ajax-uploads-with-formdata / post, je suis sorti avec le j'ai suivi le code 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 à quelque chose comme:

<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>
1
répondu Memin 2016-10-11 16:36:48

ce code fonctionne pour moi.

Utilisé commons io.téléchargement de fichiers jar & commons.jar et le jQuery forme de plugin

<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
-1
répondu Sameera Madushanka 2017-04-13 11:54:23