PHP JS Fileアップロード結果が表示されない

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> 

それはsuccessfulyファイルをアップロードしますが、

なぜ "アップロード" 私のメッセージを表示しませんか？

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にロードされている場合、あなたは（あなたのPHPは、実際にはメッセージ、あなたの例に入れないこのHTMLで応答しないと仮定し）XHR応答から、その内容を更新する必要があるためメッセージが表示されます。

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