file upload with AJAX

file upload with AJAX

i'm doing a example about upload form.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <title>Upload File Ajax</title>
    <!-- some javascript go here-->
    <script type="text/javascript">
        $(document).ready(function(){
            $('#upload').click(function(){
                doupload();
            });
            $('#uploadprogress').hide();
        });
        function doupload(){
            var iframe;
            /*create iframe*/
            try{
                iframe = document.createElement('<iframe name ="uploadiframe">');   
            }catch(ex){
                iframe = document.createElement('iframe');
                iframe.name ='uploadiframe';
            }
            iframe.src ='javascript:false';
           
            iframe.id = 'uploadiframe';
            iframe.className ='iframe';
           
            /*finished iframe*/
            document.body.appendChild(iframe);
            $('#form').attr('target','uploadiframe');
            //hide form upload
            $('#uploadform').hide();
            // finished create iframe
            $('#uploadprogress').show();
            // showing process request
            $('#uploadiframe').load(function(){
               
                $('#uploadprogress').hide();
                $('#uploadform').show();
                var result = $('body',this.contentWindow.document).html();
                //print something when process finished!
                if(result==1){
                    $('#result').html('The file upload was successful!');
                }else{
                    $('#result').html('There was an error while uploading the file!');
                }
                setTimeout(function (){
                    $('#uploadiframe').remove();
                },500);
               
            });
        }
    </script>

    <style type="text/css">
    /*some css go here*/
    .iframe{
        width:0;height:0;border:0px solid #fff;
        display:none;
    }
    </style>
    </head>

    <body>
        <h2>AJAX Upload</h2>
        <div id="uploadprogress" style="display:none;">
            <p>Uploading...</p>
            <img src="images/8-1.gif" />
        </div>
        <div id="uploadform">
            <form action="upload.php" method="post" id="form" enctype="multipart/form-data">
                <label for="file">File</label>
                <input name="file" id="file" type="file" size="30"/><br/>
                <input type="submit" id="upload" value="Upload" />
                <span id="result"></span>
            </form>
        </div>
    </body>
    </html>














































































upload.php

  1. <?php
       sleep(5);
        echo 1;
    ?>


i have problem at
  1.       var result = $('body',this.contentWindow.document).html();
i don't know why the content of iframe's null when process's complete. please heple me!