Envoi piece jointe formulaire js et php

Bonjour, je travaille actuellement sur le developpement d'un site et j'aimerai créer un formulaire de contact avec dépot de pièce jointe.
Quand je soumet le formulaire, une animation javascript affiche un spinner "envoi en cours" et disparait au profit d'un nouveau message "votre email a bien été envoyé" une fois que le mail est envoyé.

Voici mes codes, je vous détaille mon problème plus bas.

HTML :

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<form id="main-contact-form" class="contact-form" method="post" action="mailcandidat.php" onSubmit="document.getElementById('bouton').disabled=true;">
    <div class="col-sm-5 col-sm-offset-1">
        <div class="form-group">
            <label>Civilité *</label>
            <br>
            <input type="radio" name="gender" value="Mme." required="required" onClick="document.getElementById('bouton').disabled=false">  Mme.&nbsp &nbsp &nbsp          
            <?php if (isset($gender) && $gender=="female") echo "checked";?>
            <input type="radio" name="gender" value="M." onClick="document.getElementById('bouton').disabled=false">  M.
            <?php if (isset($gender) && $gender=="male") echo "checked";?>
        </div>
        <div class="form-group">
            <label>Nom *</label>
            <input type="text" name="name" class="form-control" required="required" onClick="document.getElementById('bouton').disabled=false">
        </div>
        <div class="form-group">
            <label>Prénom *</label>
            <input type="text" name="firstname" class="form-control" required="required" onClick="document.getElementById('bouton').disabled=false">
        </div>
        <div class="form-group">
            <label>Email *</label>
            <input type="email" name="email" class="form-control" required="required" onClick="document.getElementById('bouton').disabled=false">
        </div>
        <div class="form-group">
            <label>Téléphone</label>
            <input type="number" name="phone" class="form-control" onClick="document.getElementById('bouton').disabled=false">
        </div>
        <div class="form-group addresshp">
            <label>Si vous êtes un humain, ne remplissez pas ce champ *</label>
            <input type="text" name="addresshp" class="form-control" onClick="document.getElementById('bouton').disabled=false">
        </div>                        
    </div>
    <div class="col-sm-5">
        <div class="form-group">
            <label>Sujet *</label>
            <input type="text" name="subject" class="form-control" required="required" onClick="document.getElementById('bouton').disabled=false">
        </div>
        <div class="form-group">
            <label>Message *</label>
            <textarea name="message" id="message" required="required" class="form-control" rows="8" onClick="document.getElementById('bouton').disabled=false"></textarea>
        </div>                        
        <div class="form-group">
            <label for="piece_jointe">Piece jointe</label>
            <input type="hidden" name="MAX_FILE_SIZE" value="2000000" />
            <input type="file" name="piece_jointe" id="piece_jointe" />
        </div>
        <div class="form-group">
            <button id="bouton" type="submit" name="submit" class="btn btn-primary btn-lg">Envoyer</button>
        </div>
        <div class="form-group">
            <p>Les champs marqués d'une * sont obligatoires</p>
        </div>
    </div>
</form>

JAVASCRIPT :

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
var form = $('#main-contact-form');
    form.submit(function(event){
        event.preventDefault();
        //event.stopPropagation();
        var form_status = $('<div class="form_status"></div>');
        $.ajax({
            type     : "POST",
            cache    : false,
            url      : $(this).attr('action'),
            data     : $(this).serialize(),
            beforeSend: function(){
                form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Envoi en cours...</p>').fadeIn() );
            }
        }).done(function(data){
            if(data.type == 'failref'){
                form_status.html('<p class="alert alert-danger alert-dismissible"><button type=button" class="close" data-dismiss="alert" aria-label="Fermer"><span aria-hidden="true">&times;</span></button>' + data.errorref + '</p>');
            }
            else if(data.type == 'success'){
                form_status.html('<p class="alert alert-success">' + data.message + '</p>').delay(3000).fadeOut();
            }
            else if(data.type == 'failsyntax'){
                form_status.html('<p class="alert alert-danger alert-dismissible"><button type=button" class="close" data-dismiss="alert" aria-label="Fermer"><span aria-hidden="true">&times;</span></button>' + data.errorsyntax + '</p>');
            }
            else if(data.type == 'failhp'){
                form_status.html('<p class="alert alert-danger alert-dismissible"><button type=button" class="close" data-dismiss="alert" aria-label="Fermer"><span aria-hidden="true">&times;</span></button>' + data.errorhp + '</p>');
            }
        });                
    });

PHP :

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
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
<?php
header('Content-type: application/json');
$status = array(
    'type' => '',
    'message' => 'Votre message a été correctement envoyé',
    'errorsyntax' => 'Au moins un des champs contient un lien ou les caractères interdits suivants : < >, [ ]',
    'errorhp' => 'Tu es tombé dans le pot de miel',
    'errorref' => 'Mauvais referer'
);
if ($_FILES["piece_jointe"]["name"] != null) {
    $gender = @trim(stripslashes($_POST['gender']));
    $name = @trim(stripslashes($_POST['name']));
    $firstname = @trim(stripslashes($_POST['firstname']));
    $email_from = @trim(stripslashes($_POST['email']));
    $addresshp = @trim(stripslashes($_POST['addresshp']));
    $phone = @trim(stripslashes($_POST['phone']));
    $subject = @trim(stripslashes($_POST['subject']));
    $message = @trim(stripslashes($_POST['message']));
 
    $fileatt = $_FILES['piece_jointe']['tmp_name'];
    $fileatt_type = $_FILES['piece_jointe']['type'];
    $fileatt_name = $_FILES['piece_jointe']['name'];
    $email_to = 'email@domaine.fr'; //replace with your email
 
    if (is_uploaded_file($fileatt)) {
        // Read the file to be attached
        $file = fopen($fileatt, 'rb');
        $attachment = fread($file, filesize($fileatt));
        fclose($file);
        // Generate a boundary string
        $semi_rand = md5(time());
        $mime_boundary = "==Multipart_Boundary_x{$semi_rand}x";
        // Add the headers for a file attachment
        $headers = 'MIME-Version: 1.0' . "\n";
        $headers .= 'Content-Type: multipart/mixed; boundary="' . $mime_boundary . '"';
        // Add a multipart boundary above the plain message
        $body = "--{$mime_boundary}\n" .
                "Content-Type: text/html; charset=\"iso-8859-1\"\n" .
                "Content-Transfer-Encoding: 7bit\n\n" .
                $message . "\n\n";
        // Base64 encode the file data
        $attachment = chunk_split(base64_encode($attachment));
        // Add file attachment to the message
        $body .= "--{$mime_boundary}\n" .
                "Content-Type: {$fileatt_type};\n" .
                " name=\"{$fileatt_name}\"\n" .
                "Content-Disposition: inline;\n" .
                " filename=\"{$fileatt_name}\"\n" .
                "Content-Transfer-Encoding: base64\n\n" .
                $attachment . "\n\n" .
                "--{$mime_boundary}--\n";
 
        $status["type"] = "success";
        $success = mail($email_to, $subject, $body, $headers);
 
    }
    else if(!is_uploaded_file($fileatt)){
        $status["type"] = "failhp";  // Fichier trop gros => gerer erreur
    }
}
else if($_FILES["piece_jointe"]["name"] == null){
    $status["type"] = "failhp";  // Fichier trop gros => gerer erreur
}
 
echo json_encode($status);
die;

Avec ces codes, quand je soumet le formulaire, le spinner "envoi en cours..." tourne en boucle et le mail ne s'envoi pas.
En revanche, lorsque je retire la ligne : event.preventDefault(); du Javascript, je reçois bien le mail avec la pièce jointe mais je suis redirigée vers l'url liée à mon fichier php.
J'ignore si le problème vient du js ou bien du php...

Si l'un de vous a une idée, merci d'avance!

Tu ne peux pas envoyer de fichier avec AJAX.
Alors avec HTML5, il est possible de récupérer le contenu du fichier et de l'envoyer avec la requête, mais pour ma part, je considère que s'il y a un champ de type file, il est préférable de soumettre le formulaire de façon classique (et d'autant plus quand on autorise jusqu'à 2Mo).

D'acc, pas d'ajax pour l'envoi de fichiers, merci pour ta réponse !

Connais-tu un moyen de préserver mes animations "envoi en cours" et "mail envoyé" sans passer par l'ajax?
J'ai cherché un peu et ce qui revient souvent pour y parvenir c'est l'utilisation des iframes, mais c'est utilisé principalement dans l'upload de ficher vers un serveur et non dans la récupération de fichier et l'envoi de mail avec pièce jointe.

Bref, si quelqu'un a des idées à nouveau.. merci d'avance!

Non, à part la bidouille de l'iframe, je ne vois pas vraiment d'autre moyen.
Mais bon, ensuite, j'ai juste dit qu'AJAX n'est pas une solution que je recommanderais, j'ai pas dit que c'était pas possible (du moins pour les navigateurs récents :whistle:).
Ceci dit, j'ai du mal à saisir la différence que tu fais entre l'upload de fichier et le transfert d'un fichier de l'utilisateur vers le serveur. :aie:

Bah pour moi, le fait d'envoyer le mail avec une pièce jointe ne stocke pas ladite pièce jointe sur le serveur. Après je me trompe peut être.

Ce que je voudrais concrètement faire, c'est mettre en place un formulaire de contact mail avec la possibilité d'attacher au mail un CV, et que lors de l'envoi du formulaire, un spinner de chargement apparaisse au dessus du formulaire (comme c'est le cas actuellement) avec écrit "Envoi en cours..." puis une alerte "Message envoyé" (une classe alert alert-success sous Bootstrap3).

Ce qui me désole en fait c'est de ne pas pouvoir adapter le script avec ajax que j'ai fait pour l'envoi d'un mail simple sans pièce jointe à mon autre formulaire qui contient une pièce jointe. Juste parce que j'ai l'impression que les données ne sont pas traitées par le JS.

J'ai trouvé un moyen avec AJAX pour l'envoi avec pièce jointe + les deux messages.
Le problème venait du serialize() dans l'ajax qui ne traite pas les input de type file. A la place, il faut utiliser FormData comme ci-desous :

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
 
var form = $('#main-contact-form');
    form.submit(function(event){
        event.preventDefault();
        var form_status = $('<div class="form_status"></div>');
        $.ajax({
 
            type     : "POST",
            cache    : false,
            url      : $(this).attr('action'),
            data     : new FormData(this),
            processData: false,
            contentType: false,
 
            beforeSend: function(){
                form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Envoi en cours...</p>').fadeIn() );
            }
 
        }).done(function(data){
            if(data.type == 'success'){
                form_status.html('<p class="alert alert-success">' + data.message + '</p>').delay(3000).fadeOut();
            }
             else if(data.type == 'failref'){
                form_status.html('<p class="alert alert-danger alert-dismissible"><button type=button" class="close" data-dismiss="alert" aria-label="Fermer"><span aria-hidden="true">&times;</span></button>' + data.errorref + '</p>');
            }
            else if(data.type == 'failsyntax'){
                form_status.html('<p class="alert alert-danger alert-dismissible"><button type=button" class="close" data-dismiss="alert" aria-label="Fermer"><span aria-hidden="true">&times;</span></button>' + data.errorsyntax + '</p>');
            }
            else if(data.type == 'failhp'){
                form_status.html('<p class="alert alert-danger alert-dismissible"><button type=button" class="close" data-dismiss="alert" aria-label="Fermer"><span aria-hidden="true">&times;</span></button>' + data.errorhp + '</p>');
            }
        });
 
    });