Problème AJAX pour un " formdata.append "

Par LeoLB, il y a 14 ans


Base de données MySQL

Bonjour tout le monde,

Je suis actuellement en train de créer une messagerie interne avec un système de pièces jointes. J'ai créé ma messagerie interne de toute pièce mais pour faire mon système de pièce jointe j'ai utilisé un script tout fait => http://net.tutsplus.com/tutorials/java ...] es-with-ajax/

J'ai réussi à le paramétrer pour mon site, et je l'ai amélioré pour mon site : dès qu'un fichier est envoyé par l'utilisateur , il est envoyé sur le serveur et enregistré dans ma BDD mysql. Pour chaque entrée j'ai un id, une clé, et le nom du fichier mais mon problème est d'enregistrer ma clé générée sur ma page.

Voilà mes codes pour mieux comprendre mon problème :

Une partie de mon formulaire que l'utilisateur utilise pour envoyer des pièces jointes.

<section id="piecess">
  <div id="jointes">
    <h1>Joindre une ou plusieurs pièces jointes :</h1>
    <form method="post" enctype="multipart/form-data" action="upload.php">
        <input type="file" name="images" id="images" multiple />
        <input type="hidden" name="keyy" id="keyy" value="<?php echo $idpass; ?>"/>
        <button type="submit" id="btn">Upload Files!</button>
        <a class="vali" id="valii">Valider les pièces jointes</a>
    </form>
    <div id="response"></div>
    <ul id="image-list">
    </ul>
  </div>    
</section>

Voici mon générateur de clé :

<?php 
  $idpass = sha1(microtime(NULL)*100000); 
?>

Le code de traitement en AJAX :

La partie la plus importe de mon fichier JAVASCRIPT :

if (formdata) {
    formdata.append("images]", file);
    formdata.append( ..... , .......); // C'est ici que je dois envoyer ma clé ... je le supppose !         
}

Mais mon problème est d'envoyer ma clé mais étant donné que je n'ai aucune connaissance en javascript et donc ajax je ne sais absolument pas comment trouver une solution à mon problème.

Voici également mon code PHP de traitement de données : (qui fonctionne parfaitement )

<?php
foreach ($_FILES"images"]"error"] as $key => $error) {
    if ($error == UPLOAD_ERR_OK) {
        $name = $_FILES"images"]"name"]$key];
        move_uploaded_file( $_FILES"images"]"tmp_name"]$key], "uploads/" . $_FILES'images']'name']$key]);
        mysql_connect(' ******', '*******', ' *********');
    mysql_select_db(' *********');
        mysql_query("INSERT INTO piecesjointes VALUES('','".$_POST'keyy']."','".$_FILES'images']'name']$key]."')");     
    }
}
echo "<h2>Fichier(s) téléchargés !</h2>";

MERCI D'AVANCE !!

42 réponses

LeoLB, il y a 14 ans

alors là aucun problème !! :D

(même si j'ai hâte de résoudre mon problème ^^ )

gamichan, il y a 14 ans

$idpass = sha1(microtime(NULL)*100000);
la balise qui faut !
Elle est ou la balise formdata.append("keyy", "text"); ???

LeoLB, il y a 14 ans

la balise formdata.append("keyy", "text"); est à la ligne 36 du fichier javascript mais ici c'est écrit formdata.append("keyy", keyy); qui renvoie "[object HTMLInputElement]" dans la BDD

LeoLB, il y a 14 ans

Merci de m'aider ... je vais regarder ça de suite !! :D

gamichan, il y a 14 ans

:) de rien :)

gamichan, il y a 14 ans

a ses du java oh shit je connais rien en java :(

LeoLB, il y a 14 ans

ben on est deux !!

LeoLB, il y a 14 ans

bon je crois que je vais générer à la volée mon fichier javascript avec php pour entre ma clé !!
Merci de m'avoir aidé tout de même !!

gamichan, il y a 14 ans

non attent je réfléchie, y a une librairie forcement donc ses faisable sa te dérange pas 24H de patience?

LeoLB, il y a 14 ans

En fait mon problème c'est que chaque message et chaque pièce jointe à une clé qui est identique et qui est ensuite enregistrer dans la BDD. Je m'explique : dans la page de l'utilisateur, je génère une clé. Lorsqu'il envoie un message, le message est enregistrer dans la BDD avec un champ "key" qui contient ma clé, pour le moment ça marche. Lorsque qu'il upload une image, la clé générée dans la page doit être envoyé vers le fichier de traitement php de fichiers uploadés, ce qui ne fonctionne pas. [code] mysql_query("INSERT INTO piecesjointes VALUES('','".$_POST['keyy']."','".$_FILES['images']['name'][$key]."')"); . [/code] Mais mon problème est de passé la clé de la page de l'utilisateur vers la page AJAX vers la page php et c'est seulement les quelques lignes suivantes qui effectue le transfère de l'image donc je suppose que ce sont également ces lignes qui peuvent envoyer la clé ! [code] if (formdata) { formdata.append("images[]", file); formdata.append( ..... , .......); // C'est ici que je dois envoyer ma clé ... je le supppose ! } [/code] Je vous envoie tout mon code javascript pour mieux comprendre le système !! [code] (function () { var input = document.getElementById("images"), formdata = false; function showUploadedItem (source) { var list = document.getElementById("image-list"), li = document.createElement("li"), img = document.createElement("img"); img.src = source; li.appendChild(img); list.appendChild(li); } if (window.FormData) { formdata = new FormData(); document.getElementById("btn").style.display = "none"; } input.addEventListener("change", function (evt) { document.getElementById("response").innerHTML = "

Patientez . . .

" var i = 0, len = this.files.length, img, reader, file; for ( ; i

gamichan, il y a 14 ans

Heu.. arf sa je connais pas encore je suis justement en train de l’étudier pour faire mon jeux ^^

LeoLB, il y a 14 ans

Ben si tu comprend le principe rappelle toi de moi pour m'expliquer le truc !!
(j'ai juste cette ligne a corriger et ma messagerie interne est finie !!)

gamichan, il y a 14 ans

ah messagerie interne regarde s'et api :) : ici

LeoLB, il y a 14 ans

Merci je vais regarder ça !!

LeoLB, il y a 14 ans

Bon je vais essayer de lire la documentation sur les " formdata.append " même je ne comprend rien au javascript !! :(

gamichan, il y a 14 ans

A sa ses moche par contre :(

LeoLB, il y a 14 ans

Bon ... j'ai un peu compris le truc ... mais pas totalement !! :/

=> lorsque je fais

formdata.append("keyy", "text");

il m'affiche "text" dans le champ "key" de ma BDD !

Maintenant faut envoyer ma variable $idpass !!

gamichan, il y a 14 ans

alors pour sa tu doit faire des $idpass essai d'enlever "text" est ajoute au lieu de "key" $idpass est dit moi se que sa fait

LeoLB, il y a 14 ans

ok je vais essayer ça !!

LeoLB, il y a 14 ans

ça me renvoie => "[object HTMLInputElement]" dans la BDD

gamichan, il y a 14 ans

Ok donc ta plus que a faire une balise d'envoi de la clé :) ensuite sa t’enverra la clé

LeoLB, il y a 14 ans

c'est à dire ?? :D

gamichan, il y a 14 ans

essai des requête genre $idpasse passe voir ton code entier que j'essai de te mettre une variable qui enverrais la key

LeoLB, il y a 14 ans

ok je te passe tout mes codes ... deux secondes ... (je sens que ça va marcher ^^)

LeoLB, il y a 14 ans

mon fichier javascript : [code](function () { var input = document.getElementById("images"), formdata = false; function showUploadedItem (source) { var list = document.getElementById("image-list"), li = document.createElement("li"), img = document.createElement("img"); img.src = source; li.appendChild(img); list.appendChild(li); } if (window.FormData) { formdata = new FormData(); document.getElementById("btn").style.display = "none"; } input.addEventListener("change", function (evt) { document.getElementById("response").innerHTML = "

Patientez . . .

" var i = 0, len = this.files.length, img, reader, file; for ( ; i

Ecrire un message :

<section id="write">
<form method="post" action="ecrire">

        <header>
            <input type="text" placeholder="Le titre de votre message" name="title" maxlength="30">
            <a href="#" id="destinataire">Destinataires (+)</a>
            <a href="#" id="upload">Piéces Jointes (+)</a>
            <input type="submit" id="submit" class="submit" value="Envoyer">
            <?php echo $erreur;

            ?>
        </header>
        <section id="ckeditor">
            <textarea id="message" name="message">Votre message ...</textarea>
        </section>
        <section id="pharmacies">
            <aside id="GereChkbox">
                <input type="button" class="check" value="Tout cocher" onclick="GereChkbox('section_chck','1');">   
                <input type="button" class="check" value="Tout décocher" onclick="GereChkbox('section_chck','0');">   
            </aside>
            <section id="section_chck">
                <?php $destintes = mysql_query('SELECT * FROM users ORDER BY login DESC');
                    while($req1 = mysql_fetch_array($destintes)){
                        echo '<input type="checkbox" name="checkbox[]" class="checkbox" value="'.htmlentities($req1['id'], ENT_QUOTES, 'UTF-8').'"><label class="checkboxx" for="checkbox[]">'.htmlentities($req1['name'], ENT_QUOTES, 'UTF-8').'</label><br>
                ';
                    }

                ?&gt;
                <a class="vali" id="valiii">Valider les destinataires</a>
            </section>
            <span id="close"></span>
        </section>
    </form> 
  </section>

<section id="piecess">
<div id="jointes">
<h1>Joindre une ou plusieurs pièces jointes :</h1>
<form method="post" enctype="multipart/form-data" action="upload.php">
<input type="file" name="images" id="images" multiple>
<input type="hidden" name="keyy" id="keyy" value="<?php echo $idpass; ?>">
<button type="submit" id="btn">Upload Files!</button>
<a class="vali" id="valii">Valider les pièces jointes</a>
</form>
<div id="response"></div>
<ul id="image-list">
</ul>
</div>
</section>[/code] et pour finir mon fichier d'upload en php [code]<?php foreach ($_FILES["images"]["error"] as $key => $error) { if ($error == UPLOAD_ERR_OK) { $name = $_FILES["images"]["name"][$key]; move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "uploads/" . $_FILES['images']['name'][$key]); mysql_connect('*******', '************', '*********'); mysql_select_db('*******'); mysql_query("INSERT INTO piecesjointes VALUES('','".$_POST['keyy']."','".$_FILES['images']['name'][$key]."')"); } } echo "

Fichier(s) téléchargés !

"; [/code]

gamichan, il y a 14 ans

^^

gamichan, il y a 14 ans

[code](function () {     var input = document.getElementById("images"),         formdata = false;       function showUploadedItem (source) {         var list = document.getElementById("image-list"),             li   = document.createElement("li"),             img  = document.createElement("img");         img.src = source;         li.appendChild(img);         list.appendChild(li);     }         if (window.FormData) {         formdata = new FormData();         document.getElementById("btn").style.display = "none";     }           input.addEventListener("change", function (evt) {         document.getElementById("response").innerHTML = "

Patientez . . .

"         var i = 0, len = this.files.length, img, reader, file;               for ( ; i

LeoLB, il y a 14 ans

ça marche pas !! : on ne peut pas envoyer du PHP dans un fichier javascript !

gamichan, il y a 14 ans

oui

gamichan, il y a 14 ans

J'ai peut être trouver essai de parser un xml qui comme rss affiche des new mes a la place ses des key ;)

LeoLB, il y a 14 ans

ne t'embête plus pour moi ... je génère à la volée mon fichier javascript ... donc je n'ai plus de problème !! Merci tout de même de ton aide !! :D

gamichan, il y a 14 ans

Merci a toi aussi :)

gamichan, il y a 14 ans

j'ai trouver l'erreur, [code] (function () {     var input = document.getElementById("images"),         formdata = false;       function showUploadedItem (source) {         var list = document.getElementById("image-list"),             li   = document.createElement("li"),             img  = document.createElement("img");         img.src = source;         li.appendChild(img);         list.appendChild(li);     }         if (window.FormData) {         formdata = new FormData();         document.getElementById("btn").style.display = "none";     }           input.addEventListener("change", function (evt) {         document.getElementById("response").innerHTML = "

Patientez . . .

"         var i = 0, len = this.files.length, img, reader, file;               for ( ; i

gamichan, il y a 14 ans

Si sa ne marche toujours pas en entre les balises [code]

[/code] [code]<script type="text/javascript">
(function () {
    var input = document.getElementById("images"),
        formdata = false;
  
    function showUploadedItem (source) {
        var list = document.getElementById("image-list"),
            li   = document.createElement("li"),
            img  = document.createElement("img");
        img.src = source;
        li.appendChild(img);
        list.appendChild(li);
    }  
  
    if (window.FormData) {
        formdata = new FormData();
        document.getElementById("btn").style.display = "none";
    }
      
    input.addEventListener("change", function (evt) {
        document.getElementById("response").innerHTML = "<h2>Patientez . . . </h2>"
        var i = 0, len = this.files.length, img, reader, file;
      
        for ( ; i < len; i++ ) {
            file = this.files;
      
            if (!!file.type.match(/image.
/)) {
                if ( window.FileReader ) {
                    reader = new FileReader();
                    reader.onloadend = function (e) {
                        showUploadedItem(e.target.result, file.fileName);
                    };
                    reader.readAsDataURL(file);
                }
                if (formdata) {
                    formdata.append("images[]", file);
                    formdata.append("keyy", '.$idpass = sha1(microtime(NULL)100000).');                 
                }
            }  
        }
      
        if (formdata) {
            $.ajax({
                url: "http://pharm10breizh.com/webroot/js/libs/upload/upload.php",
                type: "POST",
                data: formdata,
                processData: false,
                contentType: false,
                success: function (res) {
                    document.getElementById("response").innerHTML = res;
                }
            });
        }
    }, false);
}());
</script>[/code] ou [code]<script type="text/javascript">
(function () {
    var input = document.getElementById("images"),
        formdata = false;
  
    function showUploadedItem (source) {
        var list = document.getElementById("image-list"),
            li   = document.createElement("li"),
            img  = document.createElement("img");
        img.src = source;
        li.appendChild(img);
        list.appendChild(li);
    }  
  
    if (window.FormData) {
        formdata = new FormData();
        document.getElementById("btn").style.display = "none";
    }
      
    input.addEventListener("change", function (evt) {
        document.getElementById("response").innerHTML = "<h2>Patientez . . . </h2>"
        var i = 0, len = this.files.length, img, reader, file;
      
        for ( ; i < len; i++ ) {
            file = this.files
;
      
            if (!!file.type.match(/image./)) {
                if ( window.FileReader ) {
                    reader = new FileReader();
                    reader.onloadend = function (e) {
                        showUploadedItem(e.target.result, file.fileName);
                    };
                    reader.readAsDataURL(file);
                }
                if (formdata) {
                    formdata.append("images[]", file);
                    formdata.append("keyy", '.$idpass = sha1(microtime(NULL)
100000);.');                 
                }
            }  
        }
      
        if (formdata) {
            $.ajax({
                url: "http://pharm10breizh.com/webroot/js/libs/upload/upload.php",
                type: "POST",
                data: formdata,
                processData: false,
                contentType: false,
                success: function (res) {
                    document.getElementById("response").innerHTML = res;
                }
            });
        }
    }, false);
}());
</script>[/code]

LeoLB, il y a 14 ans

Je n'avais pas du tout pensé à ça un grand merci !! Voilà mon code : [code]<?php $idpass = sha1(microtime(NULL)*100000);

<section id="piecess">

Joindre une ou plusieurs pièces jointes :

<form method="post" enctype="multipart/form-data" action="upload.php">
<input type="file" name="images" id="images" multiple>
<input type="hidden" name="keyy" id="keyy" value="<?php echo $idpass; ?>">
<button type="submit" id="btn">Upload Files!</button>
<a class="vali" id="valii">Valider les pièces jointes</a>
</form>

<?php echo '<script type="text/javascript">(function () { var input = document.getElementById("images"), formdata = false; function showUploadedItem (source) { var list = document.getElementById("image-list"), li = document.createElement("li"), img = document.createElement("img"); img.src = source; li.appendChild(img); list.appendChild(li); } if (window.FormData) { formdata = new FormData(); document.getElementById("btn").style.display = "none"; } input.addEventListener("change", function (evt) { document.getElementById("response").innerHTML = "

Patientez . . .

" var i = 0, len = this.files.length, img, reader, file; for ( ; i '; ?>[/code]

LeoLB, il y a 14 ans

Donc du coup tout marche ... C'EST TOUT SIMPLEMENT PARFAIT !!

gamichan, il y a 14 ans

:D Voila ton problème est résolu :)

LeoLB, il y a 14 ans

Ouaip et la première version stable de ma messagerie est finie !

gamichan, il y a 14 ans

Bas oui par se que en fait je me suis dit attent '.$_GET'id'].' dans un echo j'ai dit sa va pas avec java se truc ? est je t'est donnée le morceau de code ^^

LeoLB, il y a 14 ans

^^^

gamichan, il y a 14 ans

=) enjoy .