jQuery file Upload – Basique solution avec un callback
jQuery-File-Upload
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
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",
le %s indique ou seront les paramètres, il est donc important de ne pas l’oublier.
Recupérer les informations
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
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');
}
});