Discussion :

[nikko49]

Bonjour,

Je suis en train de d�velopper une m�thode pour pr�visualiser des images et les uploader apr�s selection.

Pour la preview :
Je fais �a en jquery, en encodant les images en base64 : �a marche tr�s bien

Pour la partie upload :

Voil� ce que j'ai aujourd'hui :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
 
filesToSend.push(
                {
                    'name'          : this.name,
                    'type'          : this.type,
                    'size'          : this.size,
                    'lastModified'  : this.lastModified,
                    'url'           : (URL || webkitURL).createObjectURL(this)
                });
                window.URL.revokeObjectURL(this);

Au d�part je passais mon data64 pour g�n�rer une image cot� PHP (mais passer une image en base64 � notre serveur, c'est super lent et je pense d�conseill�)
Je suis donc parvenu � trouver la fonction createObjectURL() qui prend en param�tre mon File et qui me retourne une url du type : blob:http%3A//<mon_site>.fr/2b3a78be-b0ec-40a4-8f50-1577ba7642cb
Si je copie cette url dans mon navigateur, l'image s'affiche tr�s bien.

Je comptais donc passer cette url � mon serveur PHP pour g�n�rer un fichier image de fa�on � enregistrer ce fichier sous la forme <mon_image>.jpg sur mon serveur.
De la fa�on suivante :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
 
$content = file_get_contents($url);
 
        $fp = fopen($destination . $photoID . '.' . $this->getExtension(), "w");
        fwrite($fp, $content);
        fclose($fp);

Mais je ne parviens pas � cr�er un fichier image sur mon serveur � partir de cette url au format BLOB.
J'ai tout simplement essayer un file_get_contents de mon url, mais cela ne fonctionne pas.

Y a t-il une f��on de g�n�rer une image � partir de cette BLOB url, ou alors il faut que j'utilise une autre m�thode ? (Le but est de ne pas faire un formulaire et d'envoyer mes images avec un submit : je ne souhaite pas devoir recharger la page).

Merci

[sabotage]

Tu veux faire une preview de l'image avant son envoi (dans ce cas PHP n'intervient pas) ou bien tu veux afficher l'image qui vient d'�tre upload� (dans ce cas il n'y pas besoin de ruser, l'image est sur le serveur) ?

[sekaijin]

tu confonds deux actions le preview et le upload

lorsque ton utilisateur ajoute une image tu as un �l�ment de type file
avec celui-ci tu cr�es un ObjectUrl pour g�n�r� la preview

lorsque tu dois envoyer les donn�es au serveur ce n'est pas la preview que tu dois envoyer mes l'�l�ment file

A+JYT

[nikko49]

Bonjour,

Apr�s quelques temps d'absence, je reviens sur ce probl�me que je n'arrive toujours pas � r�soudre. Surement quelque chose de tr�s simple, mais bon ...

Donc pour r�sumer et pour r�capituler :
1 - J'arrive sur une page me permettant de faire un upload
2 - Je clique sur le bouton pour ouvrir ma boite de dialogue qui me permet de choisir les images � uploader
3 - En jQuery, je r�cup�re mes images :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
 
jQuery("#toUpload").change(function()
    {
        var files = jQuery("#toUpload").prop("files");
    }

4 - Avec l'objet FileReader(), je cr�e en jQuery une vignette aper�u de mon image.
5 - Je selectionne mes images en jQuery (case a cocher ou ajout d'un attribut dans la balise img)

Et, au point suivant, je voudrais, en cliquant sur un bouton <UPLOAD>, uploader mes images sur mon serveur.
Une question, peut-etre tout bete, est comment r�cup�rer mes images afin de les uploader sur le serveur ?

Une solution que j'ai trouv�e, mais qui, � mon avis, n'est pas optimis�e, est :
- Lorsque je cr�e les vignettes aper�u, avec l'objet FileReader, j'obtiens l'image au format base64 dans mon attribut src
- Une fois mes vignettes s�lectionn�es, quand je clique sur <UPLOAD>, je r�cup�re les images au format base64 pour les envoyer, par une requete Ajax, au serveur
- Sur mon serveur, je convertis alors l'image base64 en JPG pour la stocker.

Je pense que cette solution n'est pas tr�s adapt�e. En effet, dans ma requete Ajax, dans ce cas, mon image en base64 est pass�e dans le header (et une chaine en base64 peut etre tr�s longue, ce qui est assez lent).

Merci, encore une fois, de me donner vos avis et solutions � mon probl�me,

Nikko

[ABCIWEB]

Salut,

Sinon il y a une solution toute pr�te ici avec des exemples fonctionnels. Tout ce que tu demande est d�j� fait, et m�me beaucoup plus.