Upload Ajax - Php

Navigation
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
    How does an e-commerce with bars ex: www.loja.com/meunome, and how is bd divided? [closed] How to check if a file already exists and overwrite it in Java?