I noticed I never provided a clean and simple example for jQuery iFramer other than posting a snipplet of code. I’ve thrown that snipplet into an actual working document to show it in action. Take a peek. Keep in mind the real reason for this plugin is to upload files easily with an “ajax” feel, but without flash. I think it works pretty well considering the small amount of code that it actually uses.
Here is our form which we want to submit:
<form action="/some/url/post/" method="post" id="myform">
<input type="text" name="somethin1" value="bla bla" />
<input type="text" name="somethin2" value="Some More.." />
<input type="submit" name="somethin1" value="Send It!" />
</form>
Then lets get some iFramer magic tied to the form:
$('#myform').iframer({
onComplete: function(data){
alert(data); //returned data
}
});
The php file which it posts to is pretty darn simple:
<?php
echo "field 1: ". $_REQUEST['somethin1'] ."\nfield 2: ". $_REQUEST['somethin2'];
?>
This could optionally be your file upload code. I didn’t show that functionality simply because I prefer not to have random users uploading things to my server :) Enjoy!


10 Responses
S-Article
Dec 29, 2009I’m not jquery fun. However i had a small project which leads me to this page and to others but this little piece of code, helped me to solve my problem. I’ve made some small changes to it. However i didn’t undertand what’s with the “data” this is coming from php or how?
trent
Dec 30, 2009“data” is the content output by the php (or whatever type page is posted to).
Stile
Apr 05, 2010First of all, thank you because the plugin submits the file data fine. The main problem is that the message from the server is display in a different page which for me defeats the whole purpose. How do you display the message from the server in the same form page?
trent
Apr 06, 2010The message returned by the page submit should be in the first parameter of the callback function
Téo Victor
Jul 22, 2011Very useful, thank you…=)
mahavir
Jan 05, 2012this is test email
Adam
Jan 09, 2012For me the onCompleate callback never throws the alert. The file is getting uploaded which is great but I am unable to alert the response which means I can’t do any validation.
Any suggestions.
Thanks,
-Adam
Adam
Jan 09, 2012My issue was on the server side.
for anyone using ASP.NET MVC use a ContentResult in your action, like this.
[HttpPost]
public ContentResult UploadFile(CaseStudy model, HttpPostedFileBase file)
{
var result = new ContentResult();
string responseMsg = _caseStudyService.AddAsset(model, file);
result.Content = new JavaScriptSerializer().Serialize(responseMsg);
return result;
}
Thanks for the great script man. It’s simple and it works.
-Adam
trent
Jan 09, 2012Adam, Thanks, I’m glad you got it working!
raman
Dec 17, 2012if it works i would be thankful to you