Como enviar $_FILES ao PHP com AJAX? [JavaScript]

jonasguartieri

Discussão no fórum: Como enviar $_FILES ao PHP com AJAX? — Viva o Linux, a maior comunidade GNU/Linux da América Latina.

1. Como enviar $_FILES ao PHP com AJAX?

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?

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

Como enviar $_FILES ao PHP com AJAX?

Responder tópico