Home/ Questions/Q 6601559
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T18:46:10+00:00

Simply this the code for PHP page the uses AJAX to upload file, but

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0