CODEWITHSUNDEEP
phpjavascriptajax
Adham
Adham

Reputation: 64844

AJAX upload doesn't work and it reload the entrie page

Simply this the code for PHP page the uses AJAX to upload file, but it doesn't work and I don't know why.

edit

When I click submit it reload the entire page and jQuery doesn't retrieve the data posted by PHP to the iframe

<?php 
if($_SERVER['REQUEST_METHOD'] == 'POST') {
    // Access the $_FILES global variable for this specific file being uploaded
    // and create local PHP variables from the $_FILES array of information
    $fileName = $_FILES["uploaded_file"]["name"]; // The file name
    $fileTmpLoc = $_FILES["uploaded_file"]["tmp_name"]; // File in the PHP tmp folder

    // Place it into your "uploads" folder mow using the move_uploaded_file() function
    $moveResult = move_uploaded_file($fileTmpLoc, "uploads/$fileName");

    // Check to make sure the move result is true before continuing
    if($moveResult == true) {
        echo "<div id='filename'>$fileName</div>";
    }
}
?>

<!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" />

        <title>Ajax File Upload</title>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                // If submit button is clicked
                $('form#upload').submit(function() {

                    $('#upload_wrapper').hide();
                    $('#loading').show();

                    // Get the uploaded file name from the iframe
                    $('#upload_target').unbind().load( function() {
                        var img = $('#upload_target').contents().find('#filename').html();

                        $('#loading').hide();

                        // Load to preview image
                        if(img) {
                            $('#preview').show();
                            $('#preview').attr('src', 'uploads/'+img);
                            $('#image_wrapper').show();
                        }
                    });
                });
            });

            function drawUploader() {
                $("#aa").append("<div id='upload_wrapper'>"+
                                "<form id='upload' name='upload' enctype='multipart/form-data' method='post' action='index.php' target='upload_target'>"+
                                "<input name='uploaded_file' type='file' size='30' id='uploaded_file'  />"+
                                "<input id='sent' name='sent' type='submit'  value='Upload' />"+
                                "</form>"+
                                "</div>"+
                                "<div id='loading' style='background:url(ajax-loader.gif) no-repeat left; height:50px; width:370px; display:none;'>"+
                                "<p style='margin-left:40px; padding-top:15px;'>Uploading File... Please wait</p>"+
                                "</div>"+
                                "<div id='image_wrapper' style='display:none;'><img id='preview' src='' /></div>");
                $("#aa").clone();
            }       
        </script>
    </head>

    <body>
        <input type="button" onclick="drawUploader()" value="start uplaod" />
        <div id="aa"></div>
        <iframe id="upload_target" name="upload_target" src="" style="width: 10px; height: 10px; display: none"></iframe>
    </body>
</html>

Upvotes: 1

Views: 348

Answers (2)

Paul Grime
Paul Grime

Reputation: 15104

It doesn't look like you are calling preventDefault() from the submit handler, so the form's default behaviour will be triggered, i.e. submit the form and render the response.

$('form#upload').submit(function(event) {
    event.preventDefault();
    ...
});

EDIT 1

Added to delay registering the submit handler until after the form is actually on the page / in the DOM.

    <script type="text/javascript">
        function drawUploader() {
            function mySubmitHandler (event) {
                // maybe not required - event.preventDefault();

                $('#upload_wrapper').hide();
                $('#loading').show();

                // Get the uploaded file name from the iframe
                $('#upload_target').unbind().load( function() {
                    var img = $('#upload_target').contents().find('#filename').html();

                    $('#loading').hide();

                    // Load to preview image
                    if(img) {
                        $('#preview').show();
                        $('#preview').attr('src', 'uploads/'+img);
                        $('#image_wrapper').show();
                    }
                });
            }

            $("#aa").append("<div id='upload_wrapper'>"+
                            "<form id='upload' name='upload' enctype='multipart/form-data' method='post' action='index.php' target='upload_target'>"+
                            "<input name='uploaded_file' type='file' size='30' id='uploaded_file'  />"+
                            "<input id='sent' name='sent' type='submit'  value='Upload' />"+
                            "</form>"+
                            "</div>"+
                            "<div id='loading' style='background:url(ajax-loader.gif) no-repeat left; height:50px; width:370px; display:none;'>"+
                            "<p style='margin-left:40px; padding-top:15px;'>Uploading File... Please wait</p>"+
                            "</div>"+
                            "<div id='image_wrapper' style='display:none;'><img id='preview' src='' /></div>");

            // If submit button is clicked
            $('form#upload').submit(mySubmitHandler);

            $("#aa").clone();
        }       
    </script>

Upvotes: 2

streetlogics
streetlogics

Reputation: 4730

adham - the problem is that you are defining the submit function in your $(document).ready(); but you haven't actually inserted that form into the DOM yet when the .ready() event is fired. You should move the $('form#upload').submit(function() {...}); into the "drawUploader" function after the form content gets inserted into the DOM.

Upvotes: 1

Related Questions