Como enviar $_FILES ao PHP com AJAX?

1. Como enviar $_FILES ao PHP com AJAX?

Jonas Vinícios Guartieri de Assis
jonasguartieri

(usa Debian)

Enviado em 06/07/2013 - 23:03h

Olá!

Estou tentando enviar um arquivo por Ajax ao PHP, mas ele não recebe dado algum.

Código fonte:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Upload com Ajax</title>
<link rel="stylesheet" href="/templates/css/global.css">
<script>
function upload (file) {
var sfb = document.querySelector('#selectFileButton');
var form = document.forms[0];
var file = document.querySelector('input[type=file]');
var prog = document.createElement('progress');

var fd = new FormData();
var xhr = new XMLHttpRequest();

xhr.open('POST', 'upload.php', true);

form.appendChild(prog);
form.removeChild(sfb);

xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var url = document.createElement('textarea');
url.innerHTML = xhr.responseText;
form.appendChild(url);
form.removeChild(prog);
}
}

xhr.send(fd);
}
onsubmit = function () {
return false;
}
</script>
</head>
<body>
<form method="POST" enctype="multipart/form-data">
<button type="button" id="selectFileButton" onclick="document.querySelector('input[type=file]').click()">Selecionar arquivo</button>
<input type="file" name="image" onchange="upload(this.files[0])">
</form>
</body>
</html>


No arquivo de destino (upload.php) eu gero a saída e exibo na textarea da página, mas por algum motivo que desconheço, o script PHP não recebe nenhum dado referente ao arquivo enviado, seja por $_POST ou $_FILES.

Pesquisando por horas, só encontrei soluções com jQuery, mas não tenho a menor pretenção ou vontade utilizar tal framework.

Alguém tem ideia do que fazer?

Desde já, obrigado!


  


2. Re: Como enviar $_FILES ao PHP com AJAX?

Enzo de Brito Ferber
EnzoFerber

(usa FreeBSD)

Enviado em 09/08/2013 - 13:27h

HTML: (index.php)

<html>
<head>
<script type="text/javascript" src="upload.js"></script>
</head>
<body>
<form method="post" id="uploadForm" enctype="multipart/form-data">
<input type="file" name="myInput" id="myFile" />
<button id="send">Enviar</button>
</form>
</body>
</html>


PHP: (uploadme.php)

<?php
print_r ( $_FILES['files'] );
?>


JavaScript: (upload.js)

var controls = {
upload: function( file ) {
var xhr = new XMLHttpRequest();
var fd = new FormData();

// formulário
fd.append( "files", file );

// abre requisição
xhr.open( 'POST', 'uploadme.php');

// quando o upload estiver completo
xhr.upload.addEventListener( "load", function () {
console.log('upload complete!');
}, false );

// progresso
xhr.upload.addEventListener("progress", function(evt){
if ( evt.lengthComputable) {
console.log (( evt.loaded/evt.total) * 100 );
}
else
{
console.log ( "Error uploading." );
}
},false);

// envia o formulário
xhr.send( fd );

// quando estiver pronto
xhr.onreadystatechange = function () {
if ( this.readyState == 4 ) {
console.log ( "Status: " + this.status );
console.log ( "readyState: " + this.readyState );
console.log ( "responseText: (" + this.responseText + " )");
}
};


},

init: function () {
var form = document.getElementById ( "uploadForm");
var buttonEnviar = document.getElementById( "send" );

// não deixa o formulário HTML enviar o arquivo
form.addEventListener ( "submit", function(evt){
// se não adiconar essa linha, o formulário envia o arquivo, não o XHR
evt.preventDefault();
}, false );

buttonEnviar.addEventListener ( "click", controls.handleFiles, false );
},

// chamada quando o usuário clica no botão enviar
handleFiles: function() {
var inputFile = document.getElementById("myFile");

controls.upload ( inputFile.files[0] );
}

};

// espera carregar...
window.addEventListener ( "load", controls.init, false );


Eu comentei o código pra você entender. Mais se tiver alguma dúvida, posta denovo.
Ele vai logar todas as informações no console. No GoogleChrome você aperta F12 que ele vai abrir o console pra você. ;)

Meu output foi assim:

17.757931131656242 upload.js:20
35.515862263312485 upload.js:20
53.27379339496873 upload.js:20
71.03172452662497 upload.js:20
88.78965565828122 upload.js:20
100 upload.js:20
upload complete! upload.js:14
XHR finished loading: "http://localhost/test/uploadme.php". upload.js:29
Status: 200 upload.js:34
readyState: 4 upload.js:35
responseText: (Array
(
[name] => 2954.jpg
[type] => image/jpeg
[tmp_name] => /tmp/phpXe3PbA
[error] => 0
[size] => 92080
)
)


Qualquer coisa posta denovo,
Enzo Ferber
[]'s






Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner
Linux banner
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts