1

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.

Improve this question

1 Answer 1

Reset to default
1

It's not that the submit of the form populates the <iframe>. The POST should make it back to the server - are you seeing that? Then, the server response will end up in the <iframe>. Typically what you do in order to make it feel sort-of like Ajax is to have the response page contain some Javascript that talks back to the main page somehow.

Stop returning false from your submit handler and see what happens.

The point of doing this is to avoid the default behavior of form submission. When you submit a form in the plain old HTML way, the page containing the form is replaced by the response from the server. When you target the form at an <iframe>, however, it's not. Instead the response is directed at the "page" inside the frame.

Improve this answer
Sign up to request clarification or add additional context in comments.

12 Comments

I'm getting prompted to download the io.cfm file?
Is it because it's returning raw JSON? I can request this to be changed from the server guys, but that could take some time and i'd like to get a JSON response if possible.
A JSON response will do you no good at all, because the browser is not going to know what to do with it. Check the headers in the response; if it's offering a file for download, then there's even less chance of making it work.
what format should I ask them to give it to me in? What about XML or HTML or a text header which returns the JSON and then my JS unstringifys it?
Wait - where is this "io.cfm" URL? Is that a real URL or is it just a file? It's going to be somewhere between "real hard" and "impossible" to test this without some sort of server running, even if it's just CGI.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.