Home/ Questions/Q 977643
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T03:56:03+00:00

I’m trying to create a simple AJAX uploader (as i know you can’t actually

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0