[2.x] [Form] Upload de fichiers avant soumission

[Form] Upload de fichiers avant soumission

Bonjour,

Je travaille avec symfony2, j'ai un formulaire de création d'événement. L'utilisateur doit pouvoir uploader 2 images et les visualiser avant la sousmission, un peu à la manière du bon coin : http://www2.leboncoin.fr/ai/form/1?ca=12_s

Je ne vois pas comment uploader l'image avant de soumettre le formulaire.

Voici ce que j'ai fait pour l'instant, ma vue :

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
29
30
31
32
33
34
35
36
 
.
.
.
<table>		
				<tr><td class="td_label">&nbsp;</td><td class="td_champ">&nbsp;</td></tr>
				<tr class="tr_titre"><td class="td_label_titre" colspan="4"><strong>Une sortie avec une photo génère plus de visites</strong></td></tr>
				<tr><td class="td_champ_photo">Choisir le fichier<br /><span>(Optionnel) Taille maximum : 5mo</span></td>
				<td class="td_label"><input type="hidden" name="MAX_FILE_SIZE" value="5242880">
				<input type="file" name="photo" id="photo">
				</td><td class="td_label">
				<a href="#"><img src="{{ asset('bundles/jimmyfront/images/ajouter_photo.png') }}" id="upload_button" /></a></td>
</tr>
</table>
.
.
.
// au clic sur le bouton upload, appel jquery
$("#upload_button").click(function() {
 
	$.ajax({
		type: 'GET',
		dataType: 'json',
		url:  '{{ path('upload_photo') }}',
		data: 'photo=' + document.getElementById('photo').value,
		success: function(response)
		{
			/*$('#ville').find("option").remove();
			$('#ville').append(new Option('Choisir une ville', ''));*/
			$.each(response, function(i, item) {
				/*$('#ville').append(new Option(item, i));*/
				alert(item);
			});
		}
	})
});

Voici mon controleur :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
public function uploadphotoAction(){
		$request = $this->container->get('request');
		if ($request->isXmlHttpRequest()) 
		{
			$fichier= $request->query->get('photo');
			move_uploaded_file($fichier, '../uploads/'. $fichier);
		}
 
        $response = new Response(json_encode(array($fichier)));
        $response->headers->set('Content-Type', 'application/json');
        return $response;
	}

J'ai bien mon alert qui s'affiche avec le nom de l'image mais je suis bien avec ça.
Je ne vois absolument pas comment uploaer l'image, si vous pouvez me mettre sur la bonne piste

D'avance merci

:salut:

http://lmgtfy.com/?q=jquery+upload ?

OK ce que je ne trouve pas c'est comment l'intégrer à symfony.

J'utilise par exemple la librairie uploadify

J'intègre donc la librarie et je rajoutes ce bout de code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
$(document).ready(function() {    
	$('#upload_button').uploadify({        
		'uploader'  : '{{ asset('bundles/jimmyfront/js/uploadify/uploadify.swf') }}',       
		'script'    : '{{ path("upload_photo") }}',         
		'cancelImg' : '{{ asset('bundles/jimmyfront/js/uploadify/cancel.png') }}',        
		'auto'      : true,         
		'multi'          : true,        
		'fileExt'     : '*.jpg;*.gif;*.png',        
		'fileDesc'    : 'Fichiers Images Web (.JPG, .GIF, .PNG)',        
		'onComplete'  : function(event, ID, fileObj, response, data) {
			alert('ok');
		}    
	});
});

j'aimerai qu'il ne m'affiche rien que le alert('ok') pour me dire que tout se passe bien et qu'il est bien passé par mon controleur mais ça ne fonctionne pas

Voici mon controleur :

Code:

1
2
3
4
 
public function uploadphotoAction(){
		return 'ici';
}