Bonjour,
Je suis à la recherche depuis quelques semaines d'un script simple qui permettrait aux utilisateurs d'uploader 3 images dans un dossier temporaire. J'aimerais montrer les images dans une miniature (permettre leur suppression) avant validation du formulaire global et déplacement des images vers un dossier final.
EDIT le 20/01/12 à 13:15 le problème actuel :
J'ai de nouveau "tout" rechangé je vais utiliser le plugin jquery form, qui permet d'uploader des images et de récupérer l'url de l'image uploadée.
J'ai trouvé du code intéressant ici
Seul souci, c'est que le script proposé côté serveur utilise codelgniter que je ne connais pas du tout. J'ai donc essayé de transcrire ce code en php, pour le traitement de l'upload. voici mon code :
index.php
le script jp / jquery (j'ai suivi les exemples de l'API de JqueryForm) :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5 <form id="up" action="upload_php.php" method="post" enctype="multipart/form-data"> <input id="file" type="file" name="myFile"> <div id="results"></div> </form>
et enfin ce qui me pose problème, le script côté serveur pour l'upload (en commentaire, le code utilisant codelight)
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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39 <script type="text/javascript" src="lib/jquery.js" ></script> <script type="text/javascript" src="http://malsup.github.com/jquery.form.js"></script> <script type="text/javascript"> $(document).ready(function() { var options ={ dataType: 'json', beforeSubmit: function(){ $('#results').html('<img src="img/loading.gif" id="waiting">'); // L'animation de chargement }, success:function(data){ $('#waiting').remove(); // on supprime l'animation de chargement // Si erreur est set à 1... on annule et on prévient if(data.erreur=='1'){ $('#results').html(data.message); // On affiche le message d'erreur dans la div } // Si tout s'est bien passé, on affiche l'image else{ $('#results').html('<img src="'+data.image+'" />'); } } } $('#up').submit(function() { // inside event callbacks 'this' is the DOM element so we first // wrap it in a jQuery object and then invoke ajaxSubmit $(this).ajaxSubmit(options); // !!! Important !!! // always return false to prevent standard browser submit and page navigation return false; }); // A la selection d'une image, on submit automatiquement le formulaire $('#file').change(function() { $('#up').submit(); }); }) </script>
upload_php.php
Mon script js semble ok maintenant puisque firebug m'indique que la requete POST a été effectuée, mon gif indiquant que l'upload est en cours est également présent, le souci vient donc du php.. J'ai dû commette une erreur, utiliser une fonction inconnue.. je ne sais pas bien comment debuguer cela.. L'image n'est pas transférée dans mon dossier uploads/ en tout cas, il doit donc y avoir une erreur avant "//déplacement des fichiers"
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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73 <?php function upload_file(){ $upload_dir="uploads/"; $extensions_valides = array( 'jpg' , 'jpeg' , 'gif' , 'png' ); $maxsize=1024*1024; //test sur le transfert if ($_FILES['file']['error'] > 0) { $reponse['erreur'] = 1; $reponse['message'] = "Erreur lors du transfert"; } if ($_FILES['file']['size'] > $maxsize) { $reponse['erreur'] = 1; $reponse['message'] = "Fichier trop gros"; } $extension_upload = strtolower( substr( strrchr($_FILES['file']['name'], '.') ,1) ); if ( !in_array($extension_upload,$extensions_valides) ) { $reponse['erreur'] = 1; $reponse['message'] = "Fichier incorrect"; } //Créer un identifiant difficile à deviner $nom = md5(uniqid(rand(), true)); $nom = $nom.$upload_dir; //déplacement des fichiers $resultat = move_uploaded_file($_FILES['file']['tmp_name'],$nom); if (!$resultat) { $reponse['erreur'] = 1; $reponse['message'] = "echec du transfert vers uploads."; } if ($reponse['erreur']==1) { // On fait l'echo de l'array en encodant en json echo json_encode($reponse); }else { // On retourne l'url de l'image $img_url = base_url().$nom; $reponse['erreur'] = 0; $reponse['image'] = $img_url; // On fait l'echo de l'array en encodant en json echo json_encode($reponse); } } // // Configuration upload de fichier // // $config['upload_path'] = 'uploads/'; // dossier où l'on stocke les fichiers // // $config['allowed_types'] = 'png|jpg|gif'; // type de fichiers, ici des images // // $this->upload->initialize($config); // // Si l'upload n'a pas réussi, on renvoit une erreur (1) // if(!$this->upload->do_upload()): // // Important : les erreurs renvoyées par CodeIgniter sont pré-formatées en HTML, on vire donc les tags // $erreur = strip_tags($this->upload->display_errors()); // // On prépare une array... // $reponse['erreur'] = 1; // $reponse['message'] = $erreur; // // On fait l'echo de l'array en encodant en json // echo json_encode($reponse); // else: // // Si le fichier a bien été uploadé, on renvoit 0 en erreur + les infos du fichier // $fileInfos = array('upload_data' => $this->upload->data()); // On crée une array pour faciliter la récupération d'infos fichier // $img_url = base_url().'uploads/'.$fileInfos['upload_data']['file_name']; // On va renvoyer ici l'adresse du fichier // // On prépare une array... // $reponse['erreur'] = 0; // $reponse['image'] = $img_url; // // On fait l'echo de l'array en encodant en json // echo json_encode($reponse); // endif; }
Partager