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

PHP JS文件上载结果未显示

1 个答案: