IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Upload de fichier avec données formulaire FormData Jquery


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Inscrit en
    Mars 2007
    Messages
    86
    Détails du profil
    Informations forums :
    Inscription : Mars 2007
    Messages : 86
    Par défaut Upload de fichier avec données formulaire FormData Jquery
    Bonjour tous,

    Voilà j'essaie de modifier mon formulaire en y intégrant l'upload d'une image j'utilise FormData.

    Dans la base de données j'ai bien les Input et textaera qui sont enregistrés mais l'upload ne fonctionne pas, je n'ai rien dans le dossier et rien non plus dans la base de donnée (le nom du fichier)

    Pouvez-vous m'aider ?

    Merci


    jquery code ;
    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
    <script type='text/javascript'>
       $(document).ready(function () //Setting up on Document to Ready Function
        {
            $("#btnUpload").click(function (event) {
                var form = $("#myForm1");
                var params = form.serializeArray();
                var files = $("#File1")[0].files;
                var formData = new FormData();
     
    			//upload files
     for (var i = 0; i < files.length; i++) {
                    formData.append(files[i].name, files[i]);
                }
     
    			//data
                $(params).each(function (index, element) {
                    formData.append(element.name, element.value);
                });
                var btn = $(this);
                btn.val("Uploading...");
                btn.prop("disabled", true);
                $.ajax({
                    url: "sendarticle.php", 
                    method: "post",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function () {
                        alert("test");
                        btn.prop("disabled", false);
                        btn.val("Submit");
                        $("#File1").val("");
                    },
                    error: function (error) { alert("Error"); }
                });
            });
        });
    </script>

    Mon formulaire
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <form enctype="multipart/form-data" method="post" id="myForm1">
    <input class="sujet" id="sujet"  name="sujet" type="text">
    <select name="DropDownTimezone" id="statut" name="statut"  class="statut">
              <option value="1">Valide</option>
    		  <option value="2">En attente</option>
        </select>
    <textarea id="texte" class="texte" rows="8" name="texte"></textarea>
    <input id="File1" type="file" multiple="multiple" />
    <input id="btnUpload" type="button" value="Submit" />
    </form>

    Mon fichier qui permet l'envoi des données dans SQL et le resize de l'image "sendarticle.php"

    Code php : 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
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    <?php
    session_start();
    include "./config.php";
    error_reporting(0);
    $date = date('Y-m-d H:i:s');
     
    $sujet = $_POST['sujet'];
    $texte = $_POST['texte'];
    $image = $_FILES['File1']["name"];
    $statut = $_POST['statut'];
     
    ############ Configuration ##############
    $config["image_max_size"]               = 500; //Maximum image size (height and width)
    $config["thumbnail_size"]               = 200; //Thumbnails will be cropped to 200x200 pixels
    $config["thumbnail_prefix"]             = "thumb_"; //Normal thumb Prefix
    $config["destination_folder"]           = './uploads/'; //upload directory ends with / (slash)
    $config["thumbnail_destination_folder"] = './uploads/'; //upload directory ends with / (slash)
    $config["upload_url"]                   = "http://www.site.com/admin/uploads/";
    $config["quality"]                      = 90; //jpeg quality
     
     
    if(!isset($_SERVER['HTTP_X_REQUESTED_WITH'])) {
        exit;  //try detect AJAX request, simply exist if no Ajax
    }
     
    if(!isset($_FILES['File1']) || !is_uploaded_file($_FILES['File1']['tmp_name'][0])){
       die('Image file is Missing!');
    }
     
    count total files in array
    $file_count = count($_FILES["File1"]["name"]);
     
     
    if($file_count > 0){ //there are more than one file? no problem let's handle multiple files
     
        for ($x = 0; $x < $file_count; $x++){   //Loop through each uploaded file
     
            //if there's file error, display it
            if ($_FILES["File1"]['error'][$x] > 0) {
                print get_upload_error($x);
                exit;
            }
     
            //Get image info from a valid image file
            $im_info = getimagesize($_FILES["File1"]["tmp_name"][$x]);
            if($im_info){
                $im["image_width"]  = $im_info[0]; //image width
                $im["image_height"] = $im_info[1]; //image height
                $im["image_type"]   = $im_info['mime']; //image type
            }else{
                die("Make sure image <b>".$_FILES["File1"]["name"][$x]."</b> is valid image file!");
            }
     
            //create image resource using Image type and set the file extension
            switch($im["image_type"]){
                case 'image/png':
                    $img_res =  imagecreatefrompng($_FILES["File1"]["tmp_name"][$x]);
                    $file_extension = ".png";
                    break;
                case 'image/gif':
                   $img_res = imagecreatefromgif($_FILES["File1"]["tmp_name"][$x]);    
                   $file_extension = ".gif";
                   break;
                case 'image/jpeg':
                case 'image/pjpeg':
                    $img_res = imagecreatefromjpeg($_FILES["File1"]["tmp_name"][$x]);
                    $file_extension = ".jpg";
                    break;
                default:
                    $img_res = 0;
            }
     
            //set our file variables
            $unique_id =  uniqid(); //unique id for random filename
            $new_file_name = $unique_id . $file_extension;
            $destination_file_save = $config["destination_folder"] . $new_file_name; //file path to destination folder
            $destination_thumbnail_save = $config["thumbnail_destination_folder"] . $config["thumbnail_prefix"]. $new_file_name; //file path to destination thumb folder
     
            if($img_res){
                ###### resize Image ########
                //Construct a proportional size of new image
                $image_scale    = min($config["image_max_size"]/$im["image_width"], $config["image_max_size"]/$im["image_height"]);
                $new_width      = ceil($image_scale * $im["image_width"]);
                $new_height     = ceil($image_scale * $im["image_height"]);
     
                //Create a new true color image
                $canvas  = imagecreatetruecolor($new_width, $new_height);
                $resample = imagecopyresampled($canvas, $img_res, 0, 0, 0, 0, $new_width, $new_height, $im["image_width"], $im["image_height"]);
                if($resample){
                    $save_image = save_image_file($im["image_type"], $canvas, $destination_file_save, $config["quality"]); //save image
                    if($save_image){
                        print '<img src="'.$config["upload_url"] . $new_file_name. '" />'; //output image to browser
    					print '<div id="n1">'.$new_file_name. '</div>'; //output image to browser
                    }
                }
     
                if(is_resource($canvas)){
                  imagedestroy($canvas);  //free any associated memory
                }
     
     
                ###### Generate Thumbnail ########
     
                //Offsets
                if( $im["image_width"] > $im["image_height"]){
                    $y_offset = 0;
                    $x_offset = ($im["image_width"] - $im["image_height"]) / 2;
                    $s_size     = $im["image_width"] - ($x_offset * 2);
                }else{
                    $x_offset = 0;
                    $y_offset = ($im["image_height"] - $im["image_width"]) / 2;
                    $s_size = $im["image_height"] - ($y_offset * 2);
                }
     
                //Create a new true color image
                $canvas = imagecreatetruecolor($config["thumbnail_size"], $config["thumbnail_size"]);
                $resample = imagecopyresampled($canvas, $img_res, 0, 0, $x_offset, $y_offset, $config["thumbnail_size"], $config["thumbnail_size"], $s_size, $s_size);
                if($resample){
     
     
    $query2 = "INSERT INTO weart_actu SET image ='$destination_file_save' ,  image_g = '$destination_thumbnail_save'";
    $result2 = mysqli_query($db,$query2) or die(mysql_error());
     
    $idimage = $db->insert_id;
     
                    $save_image = save_image_file($im["image_type"], $canvas, $destination_thumbnail_save, $config["quality"] );
                    if($save_image){
                        print '<img src="'.$config["upload_url"] . $config["thumbnail_prefix"]. $new_file_name. '" />';
    					print '<div id="n2">'.$config["thumbnail_prefix"]. $new_file_name. '</div>'; //output image to browser
                    }
                }
     
                if(is_resource($canvas)){
                  imagedestroy($canvas);  //free any associated memory
                }
     
     
            }
     
        }
    }
     
     //funcion to save image file
    function save_image_file($image_type, $canvas, $destination, $quality){
        switch(strtolower($image_type)){
            case 'image/png':
                return imagepng($canvas, $destination); //save png file
            case 'image/gif':
                return imagegif($canvas, $destination); //save gif file                
            case 'image/jpeg': case 'image/pjpeg':
                return imagejpeg($canvas, $destination, $quality);  //save jpeg file
            default:
                return false;
        }
    }
     
    function get_upload_error($err_no){
        switch($err_no){
            case 1 : return 'The uploaded file exceeds the upload_max_filesize directive in php.ini.';
            case 2 : return 'The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the HTML form.';
            case 3 : return 'The uploaded file was only partially uploaded.';
            case 4 : return 'No file was uploaded.';
            case 5 : return 'Missing a temporary folder. Introduced in PHP 5.0.3';
            case 6 : return 'Failed to write file to disk. Introduced in PHP 5.1.0';
        }
    }
     
     
     
    $query = "INSERT INTO weart_actu SET image ='$image',titre ='$sujet', texte ='$texte', validite ='$statut', date='$date' ";
    $result = mysqli_query($db,$query) or die(mysql_error());
    ?>

  2. #2
    Expert confirmé

    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 418
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2010
    Messages : 5 418
    Par défaut
    Salut,

    Pour débuguer côté javascript utilise la console javascript (touche F12 avec Firefox ou Chrome). Dans l'onglet console tu devrais voir afficher les éventuelles erreurs javascript. Va aussi dans l'onglet réseau et vérifie ta requête ajax, notamment les paramètres envoyés et la réponse.

    Côté php fais afficher les erreurs avec ini_set('display_errors', 1); et modifie error_reporting(0); par error_reporting(E_ALL);. Normalement s'il y a des erreurs tu pourras les voir dans la réponse de la requête ajax (toujours par l'intermédiaire du bouton réseau de la console javascript).

    Voilà je ne peux guère t'en dire plus car c'est assez difficile de trouver les erreurs dans ce genre de code sans faire de tests en direct avec les outils de débugages.

    Au passage, il manque une bonne gestion des erreurs dans le code que tu utilises. Je ne vois pas la gestion de l'erreur de dépassement du paramètre "post_max_size" du serveur. Dans ton code php, en cas de dépassement de cette valeur, cela devrait renvoyer "Image file is Missing!" et ce message sera envoyé s'il n'y a pas de fichier joint, mais aussi si l'on a sélectionné un fichier qui dépasse la taille autorisée par le paramètre "post_max_size". Dans le second cas, le visiteur risque de ne pas comprendre...

    Si tu veux un code plus complet et déjà fonctionnel tu peux utiliser ce module d'upload. Il est fourni avec une quinzaine d'exemples prêt à l'emploi avec code javascript et code php. Suffit de dézipper le dossier et de le placer sur ton serveur pour faire les premiers tests.

    L'avantage est que tu auras une solution qui permet de surpasser les principales limitations serveur - "post_max_size", "upload_max_filesize" et "max_file_uploads" donc plus de limite de taille ni de nombre de fichiers - et qui possède un retour d'informations en temps réel : progression de l'upload, temps restant estimé, affichage des vignettes des images etc. Il y a beaucoup d'autres fonctionnalités notamment des exemples (entièrement fonctionnels) de redimensions d'images, crop avant upload... Tu peux utiliser un des exemples fournis ou réaliser du sur mesure. Le mode d'emploi est en français et un petit tuto est disponible ici.



    EDIT Ah oui autre chose, fais attention à ta requête. Il faut utiliser mysqli_real_escape string pour protéger l'insertion de données utilisateur. Tel quel ta requête est sensible aux injections sql (trou de sécurité majeur).

  3. #3
    Membre confirmé
    Inscrit en
    Mars 2007
    Messages
    86
    Détails du profil
    Informations forums :
    Inscription : Mars 2007
    Messages : 86
    Par défaut
    Bonjour

    Merci pour tes conseils

    Alors j'ai modifié les notices

    J'ai ce résultat :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <br />
    <b>Strict Standards</b>:  date(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected 'Europe/Berlin' for 'CEST/2.0/DST' instead in <b>/homepages/21/d181465893/htdocs/site/admin/sendarticle.php</b> on line <b>7</b><br />
    <br />
    <b>Notice</b>:  Undefined index: File1 in <b>/homepages/21/d181465893/htdocs/site/admin/sendarticle.php</b> on line <b>46</b><br />
    <br />
    <b>Notice</b>:  Undefined index: statut in <b>/homepages/21/d181465893/htdocs/site/admin/sendarticle.php</b> on line <b>48</b><br />
    <br />
    <b>Notice</b>:  Undefined index: File1 in <b>/homepages/21/d181465893/htdocs/site/admin/sendarticle.php</b> on line <b>82</b><br />
    <br />
    <b>Notice</b>:  Undefined variable: destination_thumbnail_save in <b>/homepages/21/d181465893/htdocs/site/admin/sendarticle.php</b> on line <b>223</b><br />
    <p>ok</p>

    Il n'a pas l'air de savoir reconnaitre l'image.


  4. #4
    Membre confirmé

    Inscrit en
    Octobre 2010
    Messages
    169
    Détails du profil
    Informations forums :
    Inscription : Octobre 2010
    Messages : 169
    Par défaut FormData
    Bjr, (je suis très novice en Jq)

    Si tu essais ceci :


    Code : Sélectionner tout - Visualiser dans une fenêtre à part
      FormData().append(files[i].name, files[i]);

Discussions similaires

  1. IE - Upload de fichier avec JQuery fileupload (blueimp)
    Par tidus_6_9_2 dans le forum jQuery
    Réponses: 3
    Dernier message: 30/11/2012, 11h49
  2. Réponses: 4
    Dernier message: 22/01/2011, 16h23
  3. Upload de plusieurs fichiers avec un formulaire dynamique
    Par gregory.cat dans le forum Langage
    Réponses: 1
    Dernier message: 19/07/2010, 17h44
  4. Formulaire d'upload de fichier avec paramètre
    Par HSMan dans le forum Servlets/JSP
    Réponses: 1
    Dernier message: 21/04/2008, 20h47
  5. Réponses: 4
    Dernier message: 22/02/2008, 12h43

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo