Upload de arquivos com barra de progresso usando AJAX com Javascript puro e PHP
Para fazer upload de arquivos com barra de progresso usando AJAX, JavaScript puro e PHP, você precisará seguir estes passos:
1. Crie um formulário HTML com um campo de upload de arquivos:
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload File" name="submit">
</form>
2. Adicione um manipulador de eventos de envio de formulário que envia o arquivo usando AJAX quando o formulário é enviado:
document.getElementById("uploadForm").addEventListener("submit", function(e) {
e.preventDefault(); // evitar comportamento padrão do formulário
var file = document.getElementById("fileToUpload").files[0];
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php", true);
// definir uma função de retorno de chamada para atualizar a barra de progresso
xhr.upload.addEventListener("progress", function(e) {
var percent = Math.round((e.loaded / e.total) * 100);
document.getElementById("progressBar").style.width = percent + "%";
document.getElementById("status").innerHTML = percent + "% uploaded...";
}, false);
// enviar o arquivo
var formData = new FormData();
formData.append("fileToUpload", file);
xhr.send(formData);
});3. Crie um script PHP para processar o upload do arquivo:
<?php
if(isset($_FILES["fileToUpload"])) {
$targetDir = "uploads/";
$targetFile = $targetDir . basename($_FILES["fileToUpload"]["name"]);
// mover o arquivo para o diretório de upload
if(move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $targetFile)) {
echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
} else {
echo "Sorry, there was an error uploading your file.";
}
}
?>
4. Adicione uma barra de progresso e uma mensagem de status no seu HTML:
<div id="progressBarContainer">
<div id="progressBar"></div>
</div>
<div id="status"></div>
Com esses passos, você deve ter um formulário de upload de arquivo com uma barra de progresso que é atualizada à medida que o arquivo é enviado. Lembre-se de que o código acima usa JavaScript puro e AJAX, portanto, não há dependência de biblioteca de terceiros.
Lembre-se de que o tutorial desenvolvido no vídeo é sempre mais completo do o tutorias em texto. Então assista o vídeo e aprenda mais.
