Ajax在文件上传后显示来自php文件的响应

时间:2016-10-18 11:44:14

标签: javascript php jquery ajax

我有一个html表单来上传文件(我用php来上传)。我希望使用ajax显示上传的结果(我是新手,所以我可能会想念一些非常简单的东西),但是,我的代码目前并不这样做。我读了很多并尝试了很多东西,但是徒劳无功,所以最后我决定寻求帮助。

HTML& AJAX

<script type="text/javascript">
( function( $ ) {
    $('form').ajaxForm({
        type: "POST",
        url: "Upload.php",
        data: $('#upload').serialize(),
        dataType: "html",
        timeout: 15000,
        success: function( data ) { 
                    alert( data );
        }
    }); 
})( jQuery );
</script>
  <form enctype="multipart/form-data" method="post" id="upload">
        <input type="hidden" name="MAX_FILE_SIZE" value="2000000" />
        <h2>File to upload</h2>
        <input name="userfile" type="file" class='file'/>
        <input type="submit" name="send" value="Upload File" />
    </form>

PHP

try
{
    if ( $_POST["send"] )
    {
        if ( isset( $_FILES['userfile'] ) )
        {
            require_once "FileUploader.php";
            $fileUploader   = new FileUploader();

            if ( $fileUploader->moveFile() )
            {
                echo "Success";
            }
            echo "Error";
        }
    }
}
catch( \Exception $e )
{
    echo "\n" . $e->getMessage();
    exit();
}

目前,警报(数据);导致消息为NULL。控制台中没有错误。

2 个答案:

答案 0 :(得分:1)

正如我在评论中提到的,serialize()无法传递FILE,您可以在upload.php中使用简单的var_dump($_POST);进行检查。您可以在FormData()的实例中传递您的文件,如下面的代码

另一个问题是你的upload.php使用FileUploader.php,我不知道它有什么样的代码,但我尝试用你的upload.php样本修复你的JQuery AJAX代码

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$( function() {
    $('form').submit(function(){
          var form_data = new FormData(this);                  
          $.ajax({
            type: "POST",
            url: "upload.php",
            data: {userfile:JSON.stringify(form_data)},
            dataType: "json",
            timeout: 15000,
            success: function( data ) { 
                        console.log( data );
            }
        }); 
        return false;
    });
});
</script>
</head>
<body>
  <form enctype="multipart/form-data" method="post" id="upload">
        <input type="hidden" name="MAX_FILE_SIZE" value="2000000" />
        <h2>File to upload</h2>
        <input name="userfile" type="file" class='file'/>
        <input type="submit" name="send" value="Upload File" />
    </form>
</body>
</html>

你的upload.php有一些优化     

try
{
    if ( isset( $_FILES['userfile'] ) && $_POST["userfile"] )
        {
            require_once "FileUploader.php";
            $fileUploader   = new FileUploader();

            if ( $fileUploader->moveFile() )
            {
                echo "Success";
            }
            echo "Error";
        }
}
catch( \Exception $e )
{
    echo "\n" . $e->getMessage();
    exit();
}

答案 1 :(得分:-2)

您忘记设置发布文件的路径了!