Difficultés pour intégrer Jquery File Upload

Bonjour à tous.

Voici donc mon problème:
Je travaille sur WordPress, et je met en place un formulaire en front-end permettant de créer de nouveaux articles.
Mon but est d'intégrer cette fonctionnalité (Jquery File Upload) pour sauvegarder des images associées à l'article.

Le soucis c'est que, ne maîtrisant pas Jquery, je ne sais pas comment faire pour récupérer en php les fichiers qui sont sélectionnées via Jquery. ($_FILES ne retourne rien)
Je souhaite que les images s'enregistrent seulement lorsque je soumet mon formulaire contenant le titre de l'article, la description, etc...

Si quelqu'un a un tuto, ou bien un élément de réponse je lui en serais très reconnaissant.

Merci d'avance !
Modifié par Raphi (12 Nov 2012 - 14:29)

Up !

Lorsqu'un fichier est ajouté, il apparaît avec son nom et son poids.
Le template utilisé pour affiché la liste des fichiers prêts à être uploader est le suivant:

<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[ i ]; i++) { %}
    <tr class="template-upload fade">
        <td class="preview"><span class="fade"></span></td>
        <td class="name"><span>{%=file.name%}</span></td>
        <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
        {% if (file.error) { %}
            <td class="error" colspan="2"><span class="label label-important">Error</span> {%=file.error%}</td>
        {% } else if (o.files.valid && !i) { %}
            <td>
                <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div>
            </td>
            <td class="start">{% if (!o.options.autoUpload) { %}
                <button class="btn btn-primary">
                    <i class="icon-upload icon-white"></i>
                    <span>Start</span>
                </button>
            {% } %}</td>
        {% } else { %}
            <td colspan="2"></td>
        {% } %}
        <td class="cancel">{% if (!i) { %}
            <button class="btn btn-warning">
                <i class="icon-ban-circle icon-white"></i>
                <span>Cancel</span>
            </button>
        {% } %}</td>
    </tr>
{% } %}
</script>

Si je comprend bien, o.files[ i ] est mon objet fichier que je souhaite récupérer?
Si on peut le récupérer en jquery, comment on le récupère en PHP pour le traiter en BDD?

Si quelqu'un peut me fournir une piste...
Modifié par Raphi (13 Nov 2012 - 09:29)

Re Up...

Bonjour ,
as tu trouvé solution à ton problème ?
Je suis dans le même cas que toi, impossible de récupérer les données du fichier uploadé pour les afficher sur une autre page en php...

Si je n'abuse, ce script fonctionne avec de l'AJAX, chose qui me connais bien. Par conséquent, l'image est uploadé sans rechargement de la page, dans un dossier (de ton choix).
Il faudrais donc que le bouton upload de ton image soir en concordance avec ton bouton de validation du formulaire, et la ça devrais fonctionner.

merci Kikimagik,
c'est exactement ça, le fichier est téléchargé via un script Ajax sans rechargement de la page.

Dans mon cas, l'idée est dans un premier temps de téléchargé le fichier (sans rafraichissement de la page), d'afficher une miniature du fichier téléchargé et ensuite de rentrer les autres valeurs du formulaire pour enfin prévisualiser le tout dans uns fancybox avant de valider le formulaire et inscrire les données dans une BDD...

Donc pour moi, impossible de faire concorder le bouton d'upload avec le bouton de validation de formulaire puisque l'idée est d'afficher une prévisualisation de l'image avant de valider le formulaire...

@Arnone, non je n'ai pas trouvé de solution à mon problème.
En fait, j'aurais souhaité lors de l'enregistrement du formulaire (qui permet de créer un post), que l'image ou les images soient associés à mon post grâce wp_insert_attachment(), etc...
En gros, associer une galerie d'image à un post grâce à ce plugin.

@Kikimagik, le soucis n'est pas d'uploader le fichier dans le dossier de mon choix, ça ça fonctionne, c'est plutôt de rattacher mon fichier fraîchement uploadé à mon post créé suite à la soumission de mon formulaire.

Et la je sèche, surtout que WordPress n'est pas orienté objet, donc j'ai du mal à intégrer la classe et les méthodes au sein de WordPress...

>Raphi :
de mon côté, j'ai un peu contourné le problème dans un premier temps :

-lors du téléchargement du fichier, je l'enregistre sur une table dédié (que je nomme photo_post) dans ma BDD (je prends soins d'ajouter un champ id_post avec '0' comme valeur)

-ensuite je remplis les champs de mon formulaire, je valide le formulaire et j'enregistre le tout dans une autre table (que je nomme "post").
Ma table post contient un champ id (auto incrément).
Je récupère la valeur de ce champ id et j'"update" ensuite ma table photo_post en mettant à jour mon champs id_post avec la valeur du id (de la table post)
Ensuite je n'ai plus qu'a associé les données du formulaire avec l'image adaptée via le champ id et id_post...

Sinon, tu peux également jeter un oeil sur ce post, qui je l'espère t'aidera : www.grafikart.fr/forum/topic/7511

Bonjour,

Je vous propose une autre méthode en concordance avec le fonctionnement du script d'upload et l'idée de Raphi :

Le script d'upload vous permet d'enregistrer une ou plusieurs images dans le dossier de votre choix avec la technologie Ajax.

Mettez donc en page votre formulaire avec cette fonctionnalité d'upload.
Un client qui arrive décide d'uploader 2 images.

Ma solution est donc :
-Stocker les 2 images dans un dossier temporaire tant que le formulaire n'est pas validé.
-Lors de la reception des images, prévoir le déclenchement d'une fonction "afficher_image();" par exemple qui afficherai la/les image(s) uploader dans une div prévu pour ça : (exemple)

function afficher_image(lien_de_votre_image)
{
document.getElementById('Votre_div_pour_image').innerHTML="<img src='"+lien_de_votre_image+"' alt='mon_image' />"
}

-Puis le client rempli le formulaire, et le valide. Lors de la validation, une ligne avec identifiant et créer dans la base de données, ainsi qu'un dossier au nom de l'ID de cette article (Raphi:"associés à mon post") au les images préalablement placé dans un dossier temporaires sont déplacé dans le dossier final.

Lors de l'appel de du post id=67, un script ouvre le dossier 67 et affiche les images correspondantes, aussi simple que ça