PHP JS 文件上传结果未显示

Question

我有一个使用 drag/drop 上传文件的函数，它调用 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>

上传文件成功，但不显示我的消息"Uploaded"

为什么？

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

PHP JS 文件上传结果未显示

PHP JS File Upload result not showing

javascript

php

upload

file-upload