PHP JS文件上传结果未显示

Question

我有一个使用拖放上传文件的功能，它调用 php 函数来检查文件并上传它。但是我希望在成功上传时显示一些消息，但它没有出现。这是代码

            <div id="upload" class="border"> <i class="fa fa-upload"></i> Drag file here</div>
            <div id="result" style="display: none;">
                <?php
                if (isset($_FILES["csv"]["name"])) {
                    $uploadOk = 1;
                    if (!file_exists("./uploads/")) { mkdir("./uploads/", 0700, true); }
                    $temp = explode(".", $_FILES["csv"]["name"]);
                    $newfilename = round(microtime(true)).".".end($temp);
                    $target_dir = "./uploads/";
                    $target_file = $target_dir . $newfilename;
                    $csvFileType = pathinfo($target_file, PATHINFO_EXTENSION);
                    $iscsv = array('application/vnd.ms-excel','text/plain','text/csv','text/tsv');
                    if (file_exists($target_file)) { $uploadOk = 0; }
                    if ($_FILES["csv"]["size"] > 200000) { $uploadOk = 0; }
                    if ($csvFileType != "csv") { $uploadOk = 0; }
                    if(!in_array($_FILES['csv']['type'], $iscsv)) { $uploadOk = 0; }
                    if ($uploadOk == 1) {
                        $tmp_files = glob($target_dir."/*");
                        if (move_uploaded_file($_FILES["csv"]["tmp_name"], $target_file)) {
                            echo "Uploaded";
                        }
                    }
                }
                ?>
            </div>

和上传文件的JS函数：

<script type="text/javascript">
function sendFile(file) {
    var uri = "index.php";
    var xhr = new XMLHttpRequest();
    var fd = new FormData();
    xhr.open("POST", uri, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            $('#result').slideDown('slow');
        }
    };
    fd.append('csv', file);
    xhr.send(fd);
}
window.onload = function() {
    var dropzone = document.getElementById("upload");
    dropzone.ondragover = dropzone.ondragenter = function(event) {
        event.stopPropagation();
        event.preventDefault();
    }
    dropzone.ondrop = function(event) {
        event.stopPropagation();
        event.preventDefault();
        var filesArray = event.dataTransfer.files;
        for (var i=0; i<filesArray.length; i++) {
            sendFile(filesArray[i]);
        }
    }
}
</script>

它成功上传文件，但没有显示我的消息“已上传”

为什么？

Answer 1

您的方法的问题是上传发生时页面上不存在<div id="result" style="display: none;">。它来自您的 PHP 脚本，据我所知，它不是现有 DOM 的一部分，来自这段代码。这意味着代码$('#result').slideDown('slow')在响应成功时不会做任何事情。

您需要先将 xhr.responseText 插入 DOM，然后该代码才会生效。

if (xhr.readyState == 4 && xhr.status == 200) {
    // first you need to insert the response into the DOM somewhere
    var body = document.getElementsByTagName('body')[0];
    body.insertAdjacentHTML('beforeend', xhr.responseText);

    // Then you can actually use it
    $('#result').slideDown('slow');
}

如果它已经加载到 DOM 中，那么您需要从 XHR 响应中更新其内容（假设您的 PHP 实际上只响应消息而不是您在示例中放入的 HTML）让消息出现。

if (xhr.readyState == 4 && xhr.status == 200) {
    $('#result').text(xhr.responseText);
    $('#result').slideDown('slow');
}