jQuery iFramer is a plugin made to submit forms with a hidden iframe. Say for instance you have an Impromptu popup that contains a few form fields and a file upload. The file upload is the kicker to needing such a plugin, since you can’t upload files via old fashion ajax. Well using a simple hidden iframe and a target on our form we can submit our form into this iframe, sending the file and all. Here might be your form:
<form action="/some/url/post/" method="post" id="myform">
<input type="text" name="somethin1" value="bla bla" />
<input type="file" name="somethin1" value="bla bla" />
<input type="submit" name="somethin1" value="bla bla" />
</form>
Now with our handy plugin all we need to do is tell it to use an iframe, and we’re set:
$('#myform').iframer({
onComplete: function(data){
alert(data); //returned data
}
});
Pretty simple. There is also an option “iframe” which takes a string for the name and id to give the iframe(just incase you need to specify, doubt you ever do). This also might be an easy replacement for swf uploaders, although it doesn’t offer near the features, and never will. The good thing is you can easily send your entire form and not just the file upload(with swf uploaders) or just the text inputs(with standard ajax). This is the very first release, so use at your own risk. The source is very small so if you have any suggestions feel free to go ahead and make the changes while you’re at it! :)
You can download jQuery iFramer here.
Related posts:
8 Responses
anonymous
22|Jun|2009 1works like a charm! thanks!
Aurélio
21|Sep|2009 2can you do a live demo? thanks!
trent
23|Sep|2009 3I’ve just posted a demo.
http://trentrichardson.com/2009/09/23/a-nice-clean-jquery-iframer-example/
D
16|Oct|2009 4Perfect, thanks Trent. Simple and elegant.
Michele ESERVERS
20|Oct|2009 5Dear Trend Richard
Sorry but I have test your script and does not work like you said!
Here it’s an example and correct me WITH A WORKING VERSION IF YOU’RE ABLE!!!
This is a simple script to upload images!
index.php
_________________________
$(‘#myform’).iframer({
onComplete: function(data){
alert(data); //returned data
}
});
________________________
request.php
________________________
<?php
if (!move_uploaded_file($_FILES['mona']['tmp_name'], 'images/'. "image1.jpg")) {
$msg = "Errore nel caricamento dell’immagine!!”;
break;
}
?>
_______________________________
Michele ESERVERS
20|Oct|2009 6ADD this to index.php because this blog at first post delete it
Feroze
12|Nov|2009 7sorry but Its not work….
it is really a poor example.
trent
12|Nov|2009 8There is an actual example on this page:
http://trentrichardson.com/2009/09/23/a-nice-clean-jquery-iframer-example/
Leave a reply