文件上传后，Ajax 显示来自 php 文件的响应答案

【问题标题】：Ajax show response from php file after file upload文件上传后，Ajax 显示来自 php 文件的响应
【发布时间】：2016-10-18 21:21:28
【问题描述】：

我有一个 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。控制台中没有错误。

【问题讨论】：

可能只是因为dataType: "json",改成dataType: "html",
你看过浏览器开发者工具中的AJAX请求/响应吗？您是否在项目中包含了 jQuery 库？是否报告了任何错误？你是在网络服务器上运行它吗？
你不能上传这样的文件，你需要一个FormData对象来发送它。
请注意，如果您的前 2 个if 语句的条件不满足，则脚本将不输出任何内容。你得到的结果是什么......
您似乎将标准 jQuery ajax 语法与表单上传插件混合在一起，所以我不知道发生了什么。但是如果你真的期望 json 回来，你应该确保你的 php 脚本输出有效的 json。现在您要么输出文本，要么不输出任何内容，并且两者都不是有效的 json。

标签： javascript php jquery ajax

【解决方案1】：

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

另一个问题是在您使用 FileUploader.php 的 upload.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();
}

【讨论】：

谢谢，但是，正如我在上面的 cmets 中所写的，它现在正在将数据类型更改为 html。上传本身是通过 FileUpload.php 文件完成的，而不是 ajax 代码。感谢您对我的代码的更正，我确实需要处理它。
我认为有一个误解，将数据类型更改为html或文本是一个小问题，我提到您需要FormData来发送ajax的文件抛出post变量。

【解决方案2】：

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

【讨论】：

否，文件已成功上传，php 工作。 php 完成后，ajax 没有得到结果。如果这是问题所在，我会说我无法上传文件