jQuery file Upload – Basique solution avec un callback

jQuery-File-Upload

Comment utiliser la solution basic de http://blueimp.github.com/jQuery-File-Upload/ et faire en sorte qu’il fonctionne pour tous les navigateurs (spéciale dédicace à Internet Explorer).

La version basic à l’avantage de ne pas être surchargée de libraries et surtout beaucoup plus simple à importer dans un site web déjà créé.

Libraires

Mise en place

Pour commencer, il faut aller à l’adresse – https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin  – afin de récupérer l’index nécessaire:
jQuery File Upload Example

Si on part de ce fichier, on constatera que tout fonctionne correctement, malheureusement lorsque l’on veut récupérer des informations dans le callback done, sur Internet explorer, on ne recevera rien d’utilisable.

La solution à ce problème et de passer par forceIframeTransport. Il est possible de modifier cette option dans la librairie jqueryfileupload.js. Il faut alors aussi indiquer le redirect qui doit nous rediriger vers le fichier result.html.

// Set the following option to true to force iframe transport uploads:

forceIframeTransport: true,
 // Set the following option to the location of a redirect url on the
 // origin server, for cross-domain iframe transport uploads:
 redirect: http://www.votreurl.com/result.html?%s",
Publicités

le %s indique ou seront les paramètres, il est donc important de ne pas l’oublier.

Recupérer les informations

Le premier contrôle consiste à regarder quel url est appeler,cela devrait resembler à:
http://www.votreurl.com/result.html?%7B%22files%22%3A%5B%7B%22name%22%3A%22Chrysanthemum%20%284%29.jpg%22%2C%22size%22%3A879394%2C%22type%22%3A%22image%5C%2Fjpeg%22%2C%22url%22%3A%22http%3A%5C%2F%5C%2Fwww.votreurl.com/%5C%2Fforum%5C%2Ffiles%5C%2FChrysanthemum%2520%25284%2529.jpg%22%2C%22thumbnail_url%22%3A%22http%3A%5C%2F%5C%2Fwww.votreurl.com/%5C%2Fforum%5C%2Ffiles%5C%2Fthumbnail%5C%2FChrysanthemum%2520%25284%2529.jpg%22%2C%22delete_url%22%3A%22http%3A%5C%2F%5C%2Fwww.votreurl.com/%5C%2Fforum%5C%2F%3Ffile%3DChrysanthemum%2520%25284%2529.jpg%22%2C%22delete_type%22%3A%22DELETE%22%7D%5D%7D
Il s’agit de toutes les informations dont vous revez!
Si vous copiez-collez cette adresse dans votre explorer, vous devez récupérer quelque chose comme:
jQuery Iframe Transport Plugin Redirect Page
{"files":[{"name":"Chrysanthemum (4).jpg","size":879394,"type":"image\/jpeg","url":"http:\/\/votreurl.com\/files\/Chrysanthemum%20%284%29.jpg","thumbnail_url":"http:\/\/votreurl.com\/files\/thumbnail\/Chrysanthemum%20%284%29.jpg","delete_url":"http:\/\/www.votreurl.com\/?file=Chrysanthemum%20%284%29.jpg","delete_type":"DELETE"}]}

Si vous avez tout cela, il suffit alors depuis votre script de base de parser cette information en JSON et d’en faire ce que vous voulez

//fileupload button
$('#fileupload').fileupload({
add: function (e, data) {
  data.submit();
},
done: function (e, data) {
  console.log('done');
  //getting the url of the images
  var urlImage = "";
   var result = $( 'pre', data.result ).text();
   if( result != null && $.trim( result ) != '' ){
    var obj = JSON.parse(result);
    var urlImage = obj.files[0];
    urlImage = urlImage.url;
   }
  $('#messagePict').remove();
},
progressall: function (e, data) {
  console.log('progressing');

}
});
Publicités

Laisser un commentaire