![]() |
![]() |
Accueil > Intranet Michel Buffa > Cours Web 2.0 MBDS 2011 2012 > Projet Web 2.0 MBDS
Projet Web 2.0 MBDSDe $1Table des matières
IntroductionVoici deux sujets qui mélangent Web Services et HTML5. Ceux qui n'ont pas pris comme sujet HTML5 "continuer le paint" n'auront pas à l'intégrer au blog. Sujet 1 : booster le blog + Web Services + jQuery à la sauce HTML5Vous partirez du blog qui vous a été proposé dans le TP2 sur les Web Services et rajouterez de nombreux éléments vus dans le cours HTML5 :
Sujet 2 : ajouter des Web Services à votre projet du semestre 1 et développer un client Java Desktop ou Android
A propos de l'upload d'images sur un Web ServiceJustement, c'est à vous de voir. Je vous donne plusieurs pistes et aides. Envoyer des images sélectionnées à partir d'un champ de formulaire (<input type="file" name="imagesToUpload" multiple />), ce n'est pas compliqué, on procède à de l'envoi binaire multipart classique. Voir l'aide "web service pour uploader des fichiers binaires, plus loin dans cette page). Pour les fichiers drag'n'droppés, dans les exemples vus en cours on récupère les images au format base64, sous la forme de data URLs, c'est pour pouvoir modifier les attributs src de tags images et faire une preview dans la page sitôt le drop effectué, vous pouvez aussi utiliser les fonctions de lecture binaire de l'objet FileReader de la File API de HTML5 (plus pratiquer d'envoyer l'image en binaire jpg au serveur). Je donne aussi des pistes. Le problème est le même pour la récupération d'images depuis la web cam ou depuis un répertoire. Aide : un client JavaScript qui envoie une image pour upload
Aide : envoyer un formulaire multipart en Ajax avec jQueryLe format multipart permet d'envoyer tout un formulaire en une seule requête, même si ce formulaire contient des objets de type "file". Exemple de requête Ajax POST en jQuery : // On construit un objet qui va contenir les champs du formulaire // Notamment, certains champs qui correspondront aux images // selectionnees var data = new FormData(); // champs du formulaire titre et contenu... data.append('titre', $("#titre").value); data.append('contenu', $("#contenu").value); // et les images jQuery.each($('#file')[0].files, function(i, file) { data.append('file-'+i, file); }); // soumission par POST au WS $.ajax({ url: 'resources/article/createAvecImages', data: data, cache: false, contentType: false, processData: false, type: 'POST', success: function(data){ alert(data); } }); Il est impératif d'avoir : contentType : false, sinon jQuery rajoute lui-même un Content-type qui n'est pas bon. Vous devez aussi mettre processData à false sinon jQuery essaiera de transformer le contenu du formulaire en String. Liens web pour explications : http://stackoverflow.com/questions/5392344/ seconde réponse est la bonne. Ajax et jQuery : http://www.w3schools.com/jquery/jquery_ref_ajax.asp Le web service correspondant sera similaire à celui présenté ici : http://www.mkyong.com/webservices/ja...ple-in-jersey/ il faudra rajouter autant de @FormParam que nécessaire, autant que vous avez de champs dans votre formulaire. Si vous voulez uploader plusieurs fichiers en même temps : mettre @FormParam("file1") ... et dupliquer avec ("file2") etc.... vous testerez si les streams sont null pour ne pas uploader d'image non existante. UPDATE du 7/6/2012 : on peut directement envoyer des images encodées base64 sans avoir à s'embeter à la reception pour transformer les data urls. C'est la ligne 9 qui transforme l'image base64 en image binaire standard. Info en provenance de http://www.raymondcamden.com/index.cfm/2012/4/6/Face-detection-with-getUserMedia function snapshot() { $("#result").html("<p><i>Working hard for the money...</i></p>"); canvas.width = video.videoWidth; canvas.height = video.videoHeight; canvas.getContext('2d').drawImage(video, 0, 0); var data = canvas.toDataURL('image/jpeg', 1.0); newblob = dataURItoBlob(data); // HERE Base64 -> binary var formdata = new FormData(); formdata.append("api_key", faceKey); formdata.append("api_secret", faceSecret); formdata.append("filename","temp.jpg"); formdata.append("file",newblob); $.ajax({ url: 'http://api.face.com/faces/detect.json?attributes=age_est,gender,mood,smiling,glasses', data: formdata, cache: false, contentType: false, processData: false, dataType:"json", type: 'POST', success: function (data) { handleResult(data.photos[0]); } }); } Aide : comment décoder en Java le format Base64Il existe des méthodes et classes cachées dans le JDK, mais je vous déconseille de les utiliser. La librairie de Web Service Jersey, que vous utilisez, contient les classes qu'il faut pour encoder/décoder ce format : import com.sun.jersey.core.util.Base64; ... Base64.base64Decode(...) Aide : un web service REST pour envoi d'un fichier binaire (upload d'images par ex)Sans librairies externesLa premièresolution, la plus simple, n'utilise pas de librairie externe. On se repose uniquement sur Jersey. Voir cet article : http://www.mkyong.com/webservices/ja...ple-in-jersey/ Note : dans l'article on parle de dépendances, je pense que ce n'est pas nécessaire avec la version actuelle de Jersey. Seconde solution : utiliser la librairie Apache Common File UploadIl faut utiliser la librairie Apache common file upload : http://commons.apache.org/fileupload/
Mots clés:
|
Powered by MindTouch Deki Open Source Edition v.8.08 |