Javascript Ajax在文件上传后显示php文件的响应_Javascript_Php_Jquery_Ajax

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

javascript php jquery ajax

Javascript Ajax在文件上传后显示php文件的响应,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,我有一个html表单来上传一个文件，我用php来上传。我想用ajax显示上传的结果，因为我对它不熟悉，所以我可能会错过一些非常简单的东西，但是，我的代码目前没有做到这一点。我读了很多书，尝试了很多东西，但都没有成功，所以最后我决定寻求帮助 HTML和AJAX <script type="text/javascript"> ( function( $ ) { $('form').ajaxForm({ type: "POST", url: "Upl

我有一个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>

目前，警报数据；结果显示消息为空。控制台中没有错误。

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

正如我在评论中提到的，serialize无法传递文件，您可以通过一个简单的var\u dump$\u POST检查这一点；在upload.php中。您可以在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>

可能只是因为dataType:json，用dataType:html更改它，您是否在浏览器的开发人员工具中查看了AJAX请求/响应？您是否将jQuery库包括在项目中？是否报告了任何错误？您是在web服务器上运行此操作的吗？您不能上载这样的文件，您需要FormData对象来发送它。请注意，如果不满足前2条if语句的条件，脚本将不会输出任何内容。这就是您得到的结果……您似乎将标准jQueryAjax语法与表单上传插件混合在一起，所以我不知道发生了什么。但是，如果您确实希望返回json，那么应该确保php脚本输出有效的json。现在你要么输出文本，要么什么都不输出，两者都不是有效的json。不，文件上传成功，php工作正常。Ajax在php完成后不会得到结果。如果这是问题所在，我会说我无法上传文件谢谢，但是，正如我在上面的评论中所写的，它现在正在将数据类型更改为html。上传本身是通过FileUpload.php文件完成的，而不是ajax代码。谢谢你对我的代码的修改，我真的需要对它进行修改。我认为这是一个误解，将数据类型更改为html或文本是一个小问题，我提到你需要FormData来发送ajax的file-throw-post变量。

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

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();
}