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