Discussion :

[bdubain]

Hello,

Je souhaite 'submit' un formulaire (avec des fichiers) en ajax avec jquery.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$form.on('submit', function(){
    var $this = $(this);
    var files = document.getElementById('dn-upload-file').files;
    if (files == '' || files.length == 0) {
        alert('Aucun fichier n\'a été ajouté.');
    }
    else {
        $.ajax({
            type: $this.attr('method'),
            data: $this.serializeArray(),
            url: $this.attr('action'),
            success: function(data, textStatus, jqXHR) {
                alert('Transfert des fichiers réussi');
            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert('Transfert des fichiers échoué');
            }
        });
    }
    return false;
});

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<form id="dn-upload-form" method="post" action="/dnupload" enctype="multipart/form-data" class="form-horizontal">
	<input type="hidden" name="login" value="">
	<input type="hidden" name="clazz" value="com.dimo.extranet.base.core.objects.easysite.DepositedFile">
	<input type="file" id="dn-upload-file" name="file-content" >
	<div class="form-group">
		<div class="col-sm-12">
			<label class="col-sm-2" >LG_COMMENTARY</label>
			<textarea class="form-control" rows="3" name="commentary"></textarea>
		</div>
		<div class="col-sm-12 control-label" id="dn-filelist">
			<label class="col-sm-2 text-left">LG_FILELIST</label>
			<button type="button" class="col-sm-1 btn btn-default btn-sm" id="dn-choice-button">LG_BROWSE</button><div class="col-sm-6 text-center">LG_NOFILE</div>
 
		</div>
		<div class="col-sm-12 control-label">
			<button type="button" class="btn btn-default btn-sm" id="dn-upload-button">LG_SEND</button>
		</div>
	</div>
</form>

Seulement, dans ma servlet, la requête n'est pas 'multipart'...
Sans jquery, en utilisant un input submit, cela fonctionne bien....
Si vous savez comment faire, je suis preneur !
Merci d'avance

[SpaceFrog]

on ne peut pas faire d'upload an ajax ... suaf a envoyer le stream du fichier à uploader ...

[bdubain]

Merci pour ta réponse rapide !

L'upload en ajax est impossible même avec un (vrai) navigateur (donc pas IE) ?
Et comment envoyer le stream du fichier alors ?

[SpaceFrog]

les requêtes xmlhttprequest se font en string donc pas de possibilité de récupérer de $_FILES coté serveur.

J'ai déjà croisé des code jquery permettant de récupérer le stream du fichier et de l'envoyer sous forme de string au serveur qui se charge alors de sauvegarder ce string dans un fichier.
Personnellement je n'utilise pas d'upload en ajax car il ne permet aucun contrôle coté serveur sur le type de fichier uploader. Et de plus je ne vois aucun cas de figure dans lequel un upload ajax est nécessaire.