I'm trying to create a simple "AJAX" uploader (as i know you can't actually do an AJAX upload). I'm having issues and i REALLY don't want to use a plugin. I'm writing an app that needs to have PDF attachments as part of a form, and my app's code is already at about 1000 lines of JS + jQuery. I don't want to add on an extra 1000k of SWFObject or a giant form plugin. Plus, i like learning things so I know how they work :) and i'm fairly proficient in JS as well...
Here is what I have so far:
<!DOCTYPE html>
<html>
<head>
<title>Upload Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(function(){
$('#file_upload').submit(function(){
$('#file_upload').attr('target','upload_target');
alert($('iframe').contents().text());
return false;
});
});
</script>
</head>
<body>
Upload Test to 382
<form id="file_upload" method="post" enctype="multipart/form-data" action="io.cfm?action=updateitemfile&item_id=382">
<input name="binary" id="file" size="27" type="file" /><br />
<input type="submit" name="action" value="Upload" /><br />
<iframe id="upload_target" name="upload_target" src="" style=""></iframe>
</form>
</body>
</html>
I keep reading that if i add the target attr to a form the form will submit there, but no luck at all. It just doesn't put anything in the iframe. The "action" attr will be dynamic based on what item is selected. If i turn off all the "AJAX" it works fine too, and i don't have access to the backend as it's an internal API.
So, how do I submit this to the iframe and then get the iframe's content which will be a JSON response?
P.S. this is just a test page im working in... obv this isn't the entire app.