jQuery file Upload - Basic solution with a callback

jQuery-File-Upload

How to use the basic solution from 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 is much easier to import into an already-created website.

Libraries

Setting up

To begin with, go to the address https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin to retrieve 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 retrieve information in the done callback, on Internet Explorer, we will not receive anything usable.

The solution to this problem is to go through forceIframeTransport. It is possible to change this option in the jqueryfileupload.js library. We must then also indicate the redirect that should send 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,"

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

Retrieving information

The first check is to look at which URL is being called. 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 dreaming of!

If you copy-paste this address in your browser, you should 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 all that, then from your base script you just need to parse this information in JSON and do whatever you want with 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');

}
});

jQuery file Upload – Basic solution with a callback