Jean-Pierre Lambelet

Il n'y a pas de questions bêtes

Non classé 

jQuery file Upload – Basic solution with a callback

JP 0 Comments

jQuery-File Upload

How to use the basic solution of http://blueimp.github.com/jQuery-File-Upload/ and make it work for all browsers (special dedication to Internet Explorer).

The basic version has the advantage of not being overloaded with libraries and above all much easier to import into a website already created.

Booksellers

Setting up

To begin with, you have to go to the address – https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin – in order to recover the necessary index:
jQuery File Upload Example

If we start from this file, we will find that everything works properly, unfortunately when we want to recover information in the callback done, on the Internet explore, we will not receive anything usable.

The solution to this problem and go through forceIframeTransport. It is possible to change this option in the bookstore jqueryfileupload.js. We must then also indicate the redirect that should redirect us to the result.html file.

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

%s indicates where the parameters will be, so it's important not to forget it.

Recovering information

The first check is to look at which url is calling, it should look like:
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
This is all the information you're renoting!
If you copy-paste this address in your explore, you need to retrieve something like:
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"}]:

If you have it all, then it's enough from your basic script to parsing this information in JSON and doing what you want it

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

Leave a Reply