修改

当我点击提交时，重新加载整个页面，jQuery不会检索发布的数据通过PHP到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>

Answer 1

看起来你不是从提交处理程序调用{{3}}，因此将触发表单的默认行为，即提交表单并呈现响应。

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

编辑1

添加延迟注册提交处理程序，直到之后表单实际位于页面/ 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>

Answer 2

adham - 问题是你在$（document）.ready（）中定义了submit函数。但是当你的.ready（）事件被触发时，你还没有将这个表单插入到DOM中。你应该移动$（'form＃upload'）。submit（function（）{...}）; 将表单内容插入DOM后，进入“drawUploader”函数。

AJAX上传不起作用，它重新加载整个页面

修改

2 个答案: