Sauvegarder une Url au format BLOB dans un fichier image
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:
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:
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 :)
Upload d'une image en preview sur mon serveur php
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:
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
