Upload in IFRAME, update parent document with Ajax and jQuery
Because of all the recent problems with Flash uploading I just opted for uploading in an IFRAME. The IFRAME will reload itself when the upload is finished. When this happens it will trigger a jQuery JavaScript that will update a DIV in the document that contains the frame. It’s really easy, the below example is from a Symfony project so we can’t use the $ sign because it will conflict with the prototype library.
jQuery.noConflict();
jQuery(document).ready(function($){
$.post('images', {image_category: 'my'}, function(res){
$(parent.document).find("#image_selector").html(res);
});
});Each time the above script is loaded it will render all the images the current user has uploaded in a DIV (with id image_selector) in the containing document by way of parent.document.
The Symfony action we post to is called images.
So we won’t have upload progress or size checking in the client before the upload starts, I can live with that as long as it just works.
Related Posts
Tags: Javascript, jquery, symfony, upload