upload d'un fichier

Version imprimable

upload d'un fichier

bonjour. j'ai un problème dont après plusieurs recherches j'ai plus le choix que vous.

je veux uploader un fichier type='file', l'enregistrer dans un dossier et dans une bdd avec son textarea et d'autres informations sur la personne qui a publié. je veux le faire instantanément sans recharger ma page web donc ajax est le mieux placé pour ça,

si je le fais sans ajax tout marche bien mais si je le fais avec ajax rien ne marche ni dans la bdd ni dans le dossier d'image, pourtant j'ai besoin d'ajax pour ne pas recharger ma page.

publication.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
<form method="post" action="" id="pub_form" enctype="multipart/form-data">
  <input type="file" name="photo_pub" id="photo_pub">
  <textarea rows="15" id="legend_photo_video" name="legend_photo_video"></textarea>
  <input type="submit" name="submit" id="submit" value="Publier">
</form>
<div id="pub_message"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $('#pub_form').on('submit', function(event){
        event.preventDefault();
            var form_data = $(this).serialize();
            $.ajax({
                url : "publication_add.php",
                method : "POST",
                data : form_data,
                dataType : "JSON",
                success : function(data)
                {
                    if (data.error != '') {
                        $('#pub_form')[0].reset();
                        $('#pub_message').html(data.error);
                        load_comment();
                    }
                }
            })
        });
    });
</script>

publication_add.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
<?php
    if (session_status() == PHP_SESSION_NONE) {
        session_start();
    }
    require_once'inc/functions.php';
$pdo = new PDO('mysql:host=localhost;dbname=comment', 'root', '');
    if (isset($_SESSION['auth']->id_user) AND $_SESSION['auth']->id_user > 0) {
        $iduser = intval($_SESSION['auth']->id_user);//on a creer a variable pour l'id de l'utilisateur
        $req = $pdo->prepare('SELECT id_user, nom_user, prenom_user, domaine_user, avatar_user FROM users WHERE id_user = ?');
        $req->execute(array($iduser));
        $infouser = $req->fetch();
 
        $error = '';
 
        if (isset($_FILES['photo_pub'])){
            $legend_photo = htmlspecialchars($_POST['legend_photo_video']);
            $taillephotomax = 2000000;
            $extensionphotovalide = array('png', 'jpg', 'jpeg', 'gif', 'ico', 'bmp', 'tiff', 'tif', 'svg');
            if ($_FILES['photo_pub']['size'] <=$taillephotomax) {
                $extensionphotoupload = strtolower(substr(strrchr($_FILES['photo_pub']['name'], '.'), 1));
                $cheminphoto = "image/photovideopublier/" .$_SESSION['auth']->id_user."_photo".$infouser->nom_user."." .$extensionphotoupload;
                $resultatphoto = move_uploaded_file($_FILES['photo_pub']['tmp_name'], $cheminphoto);
                if (in_array($extensionphotoupload, $extensionphotovalide)) {
                    $req = $pdo->prepare('INSERT INTO publication (id_user_auteur, prenom_user_auteur, nom_user_auteur, avatar_user_auteur, domaine_user_auteur, nom_pub, legend_pub, date_time_pub) VALUES (?, ?, ?, ?, ?, ?, ?, NOW())');
                    $req->execute(array($infouser->id_user, $infouser->prenom_user, $infouser->nom_user, $infouser->avatar_user, $infouser->domaine_user, $_SESSION['auth']->id_user.'_photo_'.$infouser->nom_user.'.'.$extensionphotoupload, $legend_photo));
                }
                else{
                    //
                }
            }
            else{
                //
            }
        }
    }
    $data = array('error' => $error);
    echo json_encode($data);
?>

voila svp help

merci d'avance

Bonjour,

sur ta page publication.php, ouvre la console de ton navigateur avec F12 et active l’onglet « réseau » (networking).
Puis, sélectionne un fichier et clique sur « Publier ». Tu verras la requête dans la console, et tu pourras examiner les détails en cliquant dessus. Tu pourras voir que le fichier n’est pas dans le corps de la requête.

Comme indiqué dans la doc de .serialize() :

Citation:

Data from file select elements is not serialized.

En fait, .serialize() est faite pour fonctionner avec des données de type application/x-www-form-urlencoded (le type par défaut pour les requêtes POST). Ces données sont représentées sous forme de texte param1=value1&param2=value2&..., et les données binaires d’un fichier ne sont pas compatibles avec cette représentation. (À moins de faire de la bidouille avec btoa ou encodeURIComponent, mais c’est inutilement compliqué.)

J’ai fait quelques recherches et j’ai été assez surpris de ne rien trouver dans le core de jQuery qui prenne en charge l’upload de fichier. En continuant à chercher, j’ai trouvé des plugins et j’ai regardé le code source de ces plugins. Ils utilisent des fonctionnalités natives comme FormData ou XMLHttpRequest.upload.

FormData est facile à utiliser, et jQuery est capable de travailler avec, à condition d’ajouter l’option processData: false dans l’appel ajax. J’ai vu aussi plusieurs fois, lors de mes recherches, qu’il était recommandé de spécifier contentType: false. (J’ai testé et je confirme :aie:) Ensuite, il suffit de remplacer cette ligne :

Code:

var form_data = $(this).serialize();

Par ceci :

Code:

var form_data = new FormData(this);

Ça devrait marcher ;)

À propos de ton code PHP, je ne peux pas le tester mais il me semble correct.

Et sinon, tu pourrais moderniser un peu ton code jQuery en utilisant la méthode .done() décrite dans la doc de .ajax() :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ... var form_data = new FormData(this); $.ajax({ url : "publication_add.php", method : "POST", processData : false, contentType : false, data : form_data, dataType : "JSON", }) .done(function( data ) { if (data.error != "") { $("#pub_form")[0].reset(); $("#pub_message").html(data.error); load_comment(); } });

09/03/2019, 17h34
ABCIWEB

Salut,

Sur le même principe de script que celui décrit pat Watilin, il existe aussi ce module d'upload jQuery/Javascript/Php qui est fourni avec de nombreux exemples prêt à l'emploi. Il suffit de dézipper le dossier puis de le placer sur un serveur php pour faire les premiers tests.

L'intérêt est qu'il propose de nombreuses fonctionnalités pour programmer le comportement du formulaire, affichage de la progression en temps réel, affichage des vignettes de prévisualisation pour les images, etc. mais aussi il permet par défaut de surpasser les configurations serveur Php "upload_max_filesize", "post_max_size" et "max_file_uploads", ce qui permet d'uploader des fichiers sans limite de taille ni de nombre sur des serveurs mutualisés de type ovh.

La gestion des erreurs fatales est également assurée côté Php, ce qui peut être utile pour les traitements complémentaires à l'upload comme par exemple les redimensionnements d'image qui peuvent provoquer des erreurs fatales en cas de dépassement de la mémoire disponible.