Envoie de formulaire type file en Ajax

Version imprimable

Bonjour,
je travaille actuellement sur l'envoie de formulaire en ajax, cela ce passe très bien quand je veux envoyer du texte mais quand je veux envoyer une image via un input de type file, mon fichier de traitement n'arrive pas à récuperer le $_FILES je ne sais donc pas dutout comment faire voici mon code de formulaire :

Code:

1
2
3
4
5
6
7
8
9
10
11
<form class="ui form" id="formpubli" method="POST" enctype="multipart/form-data">
				    <div class="field">
						<textarea style="resize : none;" name="txt" required value=""></textarea>
					</div>
					<div class="two fields">
						<input type="file" name="post"> </input>
						<button type="submit" class="ui primary button" style="float: right;">
							Publier
						</button>
					</div>
		    	</form>

Et l'ajax :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(function(){
	$("#formpubli").submit(function(){
		txt = $(this).find("textarea[name=txt]").val();
		post = $(this).find("input[name=post]").val();
		$.post("traitement/traitement_publication.php?post",{txt: txt, post: post},function(data){
			if(data == "post"){
				$('#post').load('script/post.php');	
				$('#actuReq').load('script/actuReq.php');
				$('textarea').val('');
				alert(data);
			}
		});
		return false;
	});
});

Merci d'avance pour votre aide ! :mrgreen:

le contenu du champ file doit être utilisé en passant par un objet "FormData". et ensuite il faut définir "processData" et "contentType" lors de la requête.

ça donne quelque chose comme ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
	var formData = new FormData();
 
	$.each($(this).find("input[name=post]")[0].files, function (i, file) { // une boucle si le champ "file" permet de sélectionner plusieurs fichiers
		formData.append("f_" + i, file);
	});
 
	formData.append("texte", $(this).find("textarea[name=txt]").val());
 
 
	$.ajax({
		url : "http://url",
		type : "POST",
		data : formData,
		processData : false, 
		contentType : false, 
	})
	.done(function (reponse) {
 
 
 
	});

Merci de votre réponse,
J'ai implémenté votre code dans le mien mais je ne récupere rien dans mon fichier de traitement.. Voilà ce que j'ai fais :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$(function(){
	$("#formpubli").submit(function(){
 
		var formData = new FormData();
 
		$.each($(this).find("input[name=post]")[0].files, function (i, file) { // une boucle si le champ "file" permet de sélectionner plusieurs fichiers
			formData.append("f_" + i, file);
		});
 
		formData.append("texte", $(this).find("textarea[name=txt]").val());
 
 
		$.ajax({
			url : "traitement/traitement_publication.php?post",
			type : "POST",
			data : formData,
			processData : false, 
			contentType : false, 
		})
		.done(function (reponse) {
 
			$('#post').load('script/post.php');	
			$('#actuReq').load('script/actuReq.php');
			$('textarea').val('');
 
		});
	});
});