Bonjour,

J'ai un formulaire qui traite l'upload de fichiers en php et lorsque je souhaite afficher une miniature de mon image en jquery (que je ne connais pas) mon formulaire est soumis une seconde fois (données, image etc.)
Je vous remercie de votre aide.

Voici le 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
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
 
/////////////////////////////// POUR AFFICHER LA MINIATURE//////////////////////////////////////////////
            $(function () {
                $('#frm').on('submit', function (e) {
                    e.preventDefault();// On empêche le navigateur de soumettre le formulaire
 
                    var $form = $(this);
                    var formdata = (window.FormData) ? new FormData($form[0]) : null;
                    var data = (formdata !== null) ? formdata : $form.serialize();
 
                    $.ajax({
                        url: $form.attr('action'),
                        type: $form.attr('method'),
                        contentType: false, // obligatoire pour de l'upload
                        processData: false, // obligatoire pour de l'upload
                        dataType: 'json', // selon le retour attendu
                        data: data,
                    });
                });
 
                // A change sélection de fichier
                $('#frm').find('input[name="fichier"]').on('change', function (e) {
                    var files = $(this)[0].files;
 
                    if (files.length > 0) {
                        // On part du principe qu'il n'y qu'un seul fichier
                        // étant donné que l'on a pas renseigné l'attribut "multiple"
                        var file = files[0],
                            $image_preview = $('#image_preview');
 
                        // Ici on injecte les informations recoltées sur le fichier pour l'utilisateur
                        $image_preview.find('.thumbnail').removeClass('hidden');
                        $image_preview.find('img').attr('src', window.URL.createObjectURL(file));
                        $image_preview.find('.nom_photo').html("La photo se nomme <b>" + file.name + "</b>");
                        $image_preview.find('.poids').html(" Son poids est de <b>" + FileConvertSize(file.size) + '</b>');
                    }
                });
 
                // Bouton "Annuler"
                $('#image_preview').find('button[type="button"]').on('click', function (e) {
                    e.preventDefault();
 
                    $('#frm').find('input[name="fichier"]').val('');
                    $('#image_preview').find('.thumbnail').addClass('hidden');
                });
            });