从 XMLHttpRequest 调用的 PHP 返回值到 Javascript

Question

我正在尝试向我的 AjaxChat window 添加 "Upload Image" 功能。上传到服务器效果很好，但现在我需要能够 return 上传文件的 tmp_name/location。在我的 Javascript 中，我有以下（主要）代码（一些设置代码已被省略，因为它是不必要的——上传工作按预期进行）：

// Set up request
var xhr = new XMLHttpRequest();

// Open connection
xhr.open('POST', 'sites/all/modules/ajaxchat/upload.php', true);

// Set up handler for when request finishes
xhr.onload = function () {
    if (xhr.status === 200) {
        //File(s) uploaded
        uploadButton.innerHTML = 'Upload';
    } else {
        alert('An error occurred!');
    }
};

// Send data
xhr.send(formData);

我的PHP代码（"upload.php"）如下：

<?php
$valid_file = true;
echo '<script type="text/javascript">alert("PHP Code Reached");</script>';
if($_FILES['photo']['name']) {
    //if no errors...
    if(!$_FILES['photo']['error']) {
        //now is the time to modify the future file name and validate the file
        $new_file_name = strtolower($_FILES['photo']['tmp_name']); //rename file
        if($_FILES['photo']['size'] > (1024000)) { //can't be larger than 1 MB
            $valid_file = false;
            $message = 'Oops!  Your file\'s size is to large.';
            exit("$message");
        }

        //if the file has passed the test
        if($valid_file) {
            //move it to where we want it to be
            move_uploaded_file($_FILES['photo']['tmp_name'], '/var/www/html/images'.$new_file_name);
            $message = 'Congratulations!  Your file was accepted.';
            exit("$message");
        }
    }
    //if there is an error...
    else {
        //set that to be the returned message
        $message = 'Ooops!  Your upload triggered the following error:  '.$_FILES['photo']['error'];
        exit("$message");
    }
}
?>

我可以告诉我 PHP 代码正在运行因为图像上传到服务器。但是，我读到我可以使用以下代码从 PHP 中生成 Javascript "alert" 弹出窗口：

echo '<script type="text/javascript">alert("PHP Code Reached");</script>';

但是上面这行好像什么都没做。这是预期的吗，因为我使用的是 XMLHttpRequest，而不是直接运行ning PHP？

最终我的目标是将上传文件的名称传递回调用 PHP 的 Javascript 以便我可以创建图像 url，将其放入 img标签，并使用 ajaxChat.insertText() 和 ajaxChat.sendMessage() 将其发送到聊天 window。不过，我不确定这是否可能像我运行设置我的 PHP 那样。怎么做到这一点？

Answer 1

当您使用 XMLHttpRequest 时，服务器脚本的输出在对象的 responseText 中。所以你可以这样做：

xhr.onload = function () {
    if (xhr.status === 200) {
        //File(s) uploaded
        uploadButton.innerHTML = xhr.responseText;
    } else {
        alert('An error occurred!');
    }
};

如果你想发回多条信息，比如一条信息性消息和文件名，你可以使用JSON编码一个关联数组，它会变成一个Javascript 解析它时的对象。

从 XMLHttpRequest 调用的 PHP 返回值到 Javascript

Returning value to Javascript from PHP called from XMLHttpRequest

javascript

php

xmlhttprequest

return-value