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

Question

简单地说，PHP页面的代码使用AJAX上传文件，但是它不起作用，我也不知道为什么。

编辑

当我单击提交时，它会重新加载整个页面，而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

看起来您不是从preventDefault()处理程序中调用preventDefault() ，因此将触发表单的默认行为，即提交表单并呈现响应。

$('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（）;中定义了commit函数。 但是当触发.ready（）事件时，您实际上尚未将该表单插入DOM。 您应该移动$（'form＃upload'）。submit（function（）{...}）; 将表单内容插入DOM 后，将其放入“ drawUploader”函数。

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

问题描述

编辑

2 个解决方案

解决方案1
2 已采纳 2011-09-20 22:19:53

解决方案2
1 2011-09-20 22:53:01

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

问题描述

编辑

2 个解决方案

解决方案1 2 已采纳 2011-09-20 22:19:53

解决方案2 1 2011-09-20 22:53:01

解决方案1
2 已采纳 2011-09-20 22:19:53

解决方案2
1 2011-09-20 22:53:01