Upload Ajax - Php

1

I'm trying to upload a PDF file via Ajax and Php. But I can not.

HTML

<script>

   var client = new XMLHttpRequest();

   function upload(){

      var file = document.getElementById("uploadfile");

      var formData = new FormData();
      formData.append("upload", file.files[0]);
      formData.append("MAX_FILE_SIZE", '30000');
      formData.append("userfile", 'pdf');

      client.open("post", "upload.php", true);
      client.send(formData);

   }

   client.onreadystatechange = function(){
      if (client.readyState == 4 && client.status == 200){
         $("#resposta").html(client.responseText);
      }
   }

</script>

<input type="file" id="uploadfile" name="uploadfile" />
<input type="button" value="upload" onclick="upload()" />

PHP

<?php

$uploaddir = 'uploads/';
$uploadfile = $uploaddir.basename($_FILES['userfile']['name']);

echo '<pre>';

if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
    echo "Arquivo válido e enviado com sucesso.\n";
} else {
    echo "Possível ataque de upload de arquivo!\n";
}

echo "<br><br><br>";

echo 'Aqui está mais informações de debug:';
print_r($_FILES);

print "</pre>";

?>

PHP does not return any errors, but the file is not uploaded.

    
asked by anonymous 28.05.2015 / 19:15

4 answers

2

In addition to the situation mentioned by @Sergio , there are other issues:

For each ajax execution, a new new XMLHttpRequest() is required, ie you are only using new XMLHttpRequest() for all requests you will make, this will not work.

  • For each new xmlhttprequest , you should set a new .onreadystatechange = function(){};

  • Corrected code:

    function upload(){
      var client = new XMLHttpRequest();
      client.open("post", "upload.php", true);
      client.onreadystatechange = function(){
         if (client.readyState == 4 && client.status == 200){
            $("#resposta").html(client.responseText);
         }
      };
    
      var file = document.getElementById("uploadfile");
    
      var formData = new FormData();
      formData.append("upload", file.files[0]);
      formData.append("MAX_FILE_SIZE", '30000');
      formData.append("userfile", 'pdf');
    
      client.send(formData);
    }
    
        
    28.05.2015 / 20:40
    1

    Change% from% to% with% as you have in% with% of HTML. The $_FILES['userfile'] fetches the uploadfile of the input name and places it in the array.

    You can also check what the files have via $_FILES to debug.

        
    28.05.2015 / 20:22
    1

    Try adding to your XMLHttpRequest:

    client.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    

    But I know another method to upload, having only the limitation of allowing one file to be uploaded at a time:

    function upload(){
        var inputFile = document.getElementById("uploadfile");
        var file = inputFile.files[0];
        var formData = new FormData();
    
        client.open("post", "upload.php", true);
        client.setRequestHeader("Content-type", "application/x-www-form-urlencoded");       
        client.setRequestHeader("X-File-Name", file.name);
        client.setRequestHeader("X-File-Size", file.size);
    
        client.send(file);
    }
    

    And in PHP:

    <?php
    
    $filename = $_SERVER['HTTP_X_FILE_NAME'];
    $filesize = $_SERVER['HTTP_X_FILE_SIZE'];
    
    $in = fopen('php://input','r');
    $out = fopen('uploads/'.$filename, 'x');
    while($data = fread($in, 1024)) 
        fwrite($out, $data);
    ?>
    
        
    28.05.2015 / 20:24
    0

    In your form did you add this here?

    <form action="" method="post" enctype="multipart/form-data">
    

    This makes the upload work properly.

        
    28.05.2015 / 19:23